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

css extend sidebar
Lindsay picture Lindsay · Oct 2, 2012 · Viewed 31k times · Source

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

Onheiron picture Onheiron · Oct 2, 2012

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

Related questions

Does LESS have an "extend" feature?

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). Does LESS have this feature as well?

Read More
How extend bootstrap classes

I am doing my first steps with Bootstrap Twitter, and need to extend components. For example, I would like to change the navbar background, but without changing the original css file. I tried to create a new class .test with …

Read More
Reusing styles in SASS/SCSS without merging selectors

If I have a style definition in SCSS that looks like this: #someid { ... .message { ... &.error { // overrides of .message class } } } So I display some kind of messages in my UI which can be normal message (have .message class) or errors (…

Read More