Menu
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
928
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
84
@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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
