On my page, I have a ‘sidebar’ div that I would like to take up the whole right side of the page.
As you can see, it only is colored where there is content.
Is there any way to have it (the grey color) take up the entire viewport?
Thanks
This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
November 06, 2007 6:13pm
Subscribe [0]#1 / Nov 06, 2007 6:13pm
On my page, I have a ‘sidebar’ div that I would like to take up the whole right side of the page.
As you can see, it only is colored where there is content.
Is there any way to have it (the grey color) take up the entire viewport?
Thanks
#2 / Nov 06, 2007 8:23pm
Try making html, body and that div height: 100%;
#3 / Nov 06, 2007 9:20pm
That doesn’t work in many browsers does it Dan.
——-
And Erin, I don’t see a sidebar in Safari (see screen grab)
#4 / Nov 07, 2007 1:11am
Ya, I have just realized that my sidebar only shows up on the higher resolutions. I am working on that…give me a sec and I will make the image smaller so that the sidebar shows up.
#5 / Nov 07, 2007 1:14am
OK, try now PXLated.
#6 / Nov 07, 2007 1:34am
The thumbnails arrange top right as I open my browser window. Are they the right sidebar?
Is the background stripes what you want to span top to bottom?
#7 / Nov 07, 2007 1:40am
The thumbnails arrange top right as I open my browser window. Are they the right sidebar?
Yes.
Is the background stripes what you want to span top to bottom?
Yes.
#8 / Nov 07, 2007 1:49am
The only way you can get that to fill top to bottom is to treat it as a background image repeating vertically, aligned or fixed right as you have. I’ve tried every method I could imagine and that’s all thats worked for me and the only way I’ve ever seen it done successfully cross browser.
#9 / Nov 07, 2007 2:00am
Would it be better if it wasn’t a background image and just a color instead?
And I don’t understand what you mean…you say you have got it to work they way I have done it, but it doesn’t work?
#10 / Nov 07, 2007 2:14am
Doesn’t matter, solid color or pattern, it has to be a background image repeating vertically to extend beyond the actual content. So, it’s really not an actual background to the content but the page as a whole. It simulates a colored or patterned background.
No, in all my experimenting I’ve never gotten it to work cross browser any other way.
#11 / Nov 07, 2007 2:18am
OK, so if I make the entire background the color of the sidebar, then explicitly set the background image for the header and the image block I should be good?
Or am I still not understanding properly?
All I am looking for is something simple, like this. I will take a look at it and see how they do it.
Thanks
#12 / Nov 07, 2007 2:31am
Could be wrong but that one stretches because there is a footer and the other column is longer. Check the code and see if you can get it to work. I tried a ton of techniques and couldn’t get them to work consistently cross browser so reverted to the tried-n-true background image 😊
#13 / Nov 07, 2007 2:37am
Gotcha…I will try the background image method…I can get mine to repeat, I just can’t seem to convince it to go all the way to the bottom of the viewport. Maybe I should do it in the body tag and not the sidebar div?
Thanks for your help.
#14 / Nov 07, 2007 2:43am
Gotta be in the css for the <body> not the content <div> 😊
#15 / Nov 07, 2007 2:50am
OK, so I can set the body background to the sidebar background, then set each individual section (header, image, etc) background to overwrite it?
I will give that a go.