Geek Answers Handbook

How can I extend the sidebar along the entire page?

I looked at other solutions, however they do not work for me. I tried height: 100% on my sidebar and it still doesn't do the trick. Can someone point me in the right direction? I would like the sidebar color 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

+7
source share
4 answers

Ok, I will try to explain a little more:

  • When you set height: 100%; in css, you should ask yourself - "100% of what?" -... Well, it depends on how you set the position of the element. When you set position: absolute; , then it will be 100% of the user's browser, otherwise it will be 100% of the height of the parent element. That way, if you ain't setting the correct height or absolute position somewhere, you just get 100% nothing, nothing (which will return to the standard height adjusted for the content).

  • So, let's think for a moment about making the parent position of the div absolute and set it at 100% height (so that your sidebar with relatively positioned children will get the same height if its height is set to 100%). HERE FIDDLE - Now let's see what we have: we have a parent div (yellow), as tall as the view of the user's browser, but its height is fixed and will not change according to the content, then we have a sidebar (red) corresponding to its parent height (while its height will not match the content), finally, we have a long text of the content (transparent bg), which clearly overlaps the parent height of the div and the earth in the middle of nowhere. Not good...

  • What we can do? (it doesn't seem that setting parent overflow to scroll is a good idea ) ... we need to look at the problem in the right direction: you basically have two div siblings, and you want them to fit their content well, but at the same time meanwhile you want one of them to keep his own sister with the same height → there are no simple pess css solutions for this (what do I know).

  • Finally, my suggestion is to use a little jquery: here is a quick setup and here is a complete site . Now just write:

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

    and everything will work well . Notice that I left the absolute position for the parent and set it to 100% height, but did not set the height for the sidebar, which now exactly matches the actual size of the content panel.

Hope this helps

+18
source

@Onheiron, your post was extremely helpful. Thanks!

I added a line to my code because I noticed that short pages of content do not extend completely to the bottom of the page and make the sidebar remain short. Now the script checks to see if one (.content or body) has a large 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 be the default for css. There is no need for a script if the .content area .content smaller than the body.

+2
source

height:100% should work fine, but you must make sure that you also create a containing div of 100%.

 #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%; }
0
source

It is very simple if you use Bootstrap v3 or higher.

 .sidebar { background-color: lightgrey; position: fixed; bottom: 0; }

Presto!

0
source

More articles:


All Articles