homepage Welcome to WebmasterWorld Guest from 50.16.130.188
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Stop div extending off bottom of browser window
ProbablyMike




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

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




msg:4078320
 1:43 pm on Feb 11, 2010 (gmt 0)

Hey Mike,

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

ProbablyMike




msg:4081193
 10:44 am on Feb 16, 2010 (gmt 0)

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




msg:4083452
 1:39 pm on Feb 19, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved