How can I extend my sidebar throughout the entire length of the page?

Question

I've looked at other solutions, however they're not working for me. I've tried height: 100% on my sidebar and that's still not doing the trick. Could someone please point me in the right direction? I'd like the color of the sidebar to extend the entire length of the page.

HTML: http://lrroberts0122.github.com/DWS/lab3/index.html

CSS: http://lrroberts0122.github.com/DWS/lab3/css/main.css

Answer 1

Ok I'll try to explain little more here:

1. When you set height:100%; in css you have to ask yourself - "100% of what?" - ... Well this depends on how you set the element's position. When you set position:absolute; then it'd be 100% of user's browser view otherwise it'd be 100% of the element's parent height. Thus if you ain't setting a proper height or an absolute position somewhere you'll just get 100% of nothing which is nothing (which rolls back to default content-adjusted height).

2. So let's for a moment consider making parent div's position absolute and setting it at 100% height (so that your relatively positioned children sidebar will get the same height if its height is set to 100%). HERE A FIDDLE - Now let's see what we have: we have a parent div(yellow) as high as the user's browser view, but its height is fixed and won't change to fit the content, then we have a sidebar(red) matching its parent's height (thus its height won't fit the content eather), finally we have a long content text(transparent bg) which clearly overlaps the parent div's height and lands in the middle of nowhere. Not good...

3. What can we do? (doesn't seem setting parent's overflow to scroll is a good idea) ... we need to watch the problem in the right way : you basically have two sibling divs and you want them to fit their content height well, but at the same time you want one of them to keep its sibling's same height -> no easy peasy css solutions for that (that I know of).

4. Finally my suggestion is to use a little jquery: here a fast setup and here the full site. Now just write:

   var height = $('.content').height()
   $('.sidebar').height(height)​
   

   and it'll work just fine. Notice I left the absolute position for the parent and set it to 100% height, but didn't set any height for the sidebar which now fairly matches the actual size of the content panel.

Hope this helps