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

fast answer is you "cannot" because height is supposed to change depending on the content size, so you won't be able to set a fixed height anywhere so you're like making 100% of nothing which is nothing. To solve this you should use little javascript — Carlo Moretti, Oct 02 '12 at 19:07
It would be considered best practice to post code in matter straight into the question, and not just links. Now if i wanted to help, i have to crawl thru 2 files and look for specific rows, instead of you pointing them out. — Tom, Oct 03 '12 at 04:13

Carlo Moretti · Accepted Answer · 2016-03-11T07:38:04.217

Ok I'll try to explain little more here:

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).
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...
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).
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

extremely he;pful was looking for this for a while you have saved my day! — Mr. Pyramid, Mar 27 '18 at 12:44

score 2 · Answer 2 · edited Nov 26 '13 at 21:24

@Onheiron, your post was extremely helpful. Thank you!

I added a line to my code because I noticed that short content pages did not extend all the way to the bottom of the page and caused the sidebar to stay short as well. Now the script checks to see what one (.content or body) has a greater height and then applies the same height to the .sidebar.

HTML:

<body>
    <div class="sidebar"></div>
    <div class="content"></div>
</body>

JavaScript:

$(document).ready(function () {
    var height1 = $('.content').height()
    var height2 = $('body').height()

    if (height1 > height2) {
        $('.sidebar').height(height1)
    } else {
        $('.sidebar').height(height2)
    }
});

CSS:

body, .sidebar {
    height:100%
}

Then lose the else part of the if statement as it will default to the css. No need for the script if the .content area is a lesser height than the body.

score -1 · Answer 3 · edited Nov 26 '13 at 21:25

-1

height:100% should work fine, but you have to make sure you make the containing div 100% as well.

#main-content {
    background: url("../images/diagonal-noise.png");
}
#content {
    background-color: #FEFEFE;
    width: 920px;
    margin-left: auto;
    margin-right: auto;
    border-left: 25px solid #79879E;
    border-right: 25px solid #79879E;
    padding: 20px;
    height:100%;
}
#secondary-content {
    background-color: #CED6E2;
    width: 200px;
    float: left;
    border-right: 1px dotted #79879E;
    padding: 10px;
    margin: 10px 20px 10px -20px;
    height:100%;
}

edited Nov 26 '13 at 21:25

KyleMit

30,350
66
462
664

answered Oct 02 '12 at 19:05

Jason

3,330
1
33
38

You might have to use something like the [Faux Columns](http://www.alistapart.com/articles/fauxcolumns/) cheat to get it to work. – Jason Oct 02 '12 at 19:15
won't work man, or at least not that well... http://jsfiddle.net/MLsN5/1/ in the fiddle you can see you need to set position absolute to parent's div and also this makes parent's height fixed and it won't fit the content height... if you're keen to try javascipt out imma post you a fiddle with that. Problem here is you want the sidebar to fit sibling's height not parent's – Carlo Moretti Oct 02 '12 at 19:18
I fixed it by giving it a bottom padding of 30000px and a bottom margin of -30000px. No javascript, no faux columns. Just css 8D – Lindsay Oct 02 '12 at 19:28
Also used overflow: hidden; on the parent container. – Lindsay Oct 02 '12 at 19:31
don't do that, you need heights to be free and fit with the content, you don't want your content to disappear out the box! – Carlo Moretti Oct 02 '12 at 19:49

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

3 Answers3