Welcome to WebmasterWorld Guest from 54.158.65.139

Forum Moderators: not2easy

Stop div extending off bottom of browser window

   
11:45 am on Feb 11, 2010 (gmt 0)

5+ Year Member



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
1:43 pm on Feb 11, 2010 (gmt 0)

5+ Year Member



Hey Mike,

Without getting into it I figure this may help: CSS example: 100% height [webmasterworld.com].
10:44 am on Feb 16, 2010 (gmt 0)

5+ Year Member



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!
1:39 pm on Feb 19, 2010 (gmt 0)

5+ Year Member



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

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month