homepage Welcome to WebmasterWorld Guest from 54.226.192.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Stop div extending off bottom of browser window
ProbablyMike

5+ Year Member



 
Msg#: 4078255 posted 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

5+ Year Member



 
Msg#: 4078255 posted 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

5+ Year Member



 
Msg#: 4078255 posted 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

5+ Year Member



 
Msg#: 4078255 posted 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