Stop div extending off bottom of browser window

[ProbablyMike]

Hi,

I've got a page with two divs, basically a header and main content.

-------------------------------- 
|Header div....................| 
| blah blah blah...............| 
|..............................| 
|------------------------------| 
|content div...................| 
| more blah blah blah..........| 
|..............................| 
|..............................| 
|..............................| 
|..............................| 
-------------------------------- 

Basically what I want to happen is that the content div never goes off the bottom of the browser window, but if the content is longer it then scrolls (overflow:scroll)

The content is variable length.

How can I get the content div to stop at the bottom of the browser window.

Note, this must work in IE6(!)

Cheers,
Mike

[CSS_Kidd]

Hey Mike,

Without getting into it I figure this may help: CSS example: 100% height [webmasterworld.com].

[ProbablyMike]

Hi CSS_Kidd,

I've tried all sorts of variations like that, but none of them do what I'm after.

I think I'm going to go back and try and make the header position:fixed, but that caused problems of it's own!

[ProbablyMike]

After spending too much time playing with CSS and not getting anything that worked good in IE6, I tried a different approach, and ended up using jQuery to resize the div, here is what I did.

Set overflow:auto on the div, then get jQuery to calculate the top position of the div, the height of the browser window, and then calculate the desired height of the div.

function js_SetDivHeight() {
var divTop, windowHeight, divHeight;

divTop = jQuery("#detaildiv").offset().top
windowHeight = jQuery(window).height();
divHeight = ((windowHeight - divTop) - 50) + "px";

jQuery("#detaildiv").css({"height":divHeight});
}

Do this on page load, and window resize and it works a treat.

jQuery(window).resize(js_SetDivHeight);