Question

I’ll admit that CSS is not my cup of tea, so it’s possible that I’m missing something obvious here. My problem is that when I have an element that has both CSS properties of “clear: both;” and “height: 100%;” the element actually ends up going past the page height. Here is an example: http://jsfiddle.net/d9mv7/

Notice that the blue frame causes a scrollbar to appear and exceeds the page height despite being “100%”. When “clear: both” property is removed, it renders as expected (JsFiddle still adds an unneeded scrollbar, but when rendering normally, I don’t have that issue).

My intent is to have the bottom div (the blue one in JsFiddle) go until the bottom of page height, but stop at the bottom of the page, drawing the border correctly, same way as on the sides. The problem is that I do have content above the div that has a float property, requiring div to have the “clear: both” property to render correctly (unless there is another way without having to hardcode the pixel size).

I’ve tried wrapping both the top (float element) and bottom div inside an additional div, such that their height is relative to that div instead of the page. This seemed to make the overlap smaller (and scrollbar shorter), but did not make it go away. Using “overflow: hidden;” will not work for me either, since it still makes the div and the content go beyond the bottom, only hiding the scrollbar. How do you guys suggest I handle this (preferably without JavaScript)?

Answer 1

As the two other posters suggested, I ended up going with a JavaScript solution. If someone can find a CSS-only solution that makes no assumptions about size/contents of the divs, please post it and I will change the accepted answer. Here is how I’m handling it for now (this uses jQuery, but similar logic can be done with native JS):

$('#second-panel').height(document.height-$('#first-panel').height());

Alternatively, if your divs have margins/padding/borders that are thick enough to matter and you want them included in the measurements as well (because element.height() doesn’t), you can use outerHeight:

var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);