homepage Welcome to WebmasterWorld Guest from
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

100% page height NOT window height

5+ Year Member

Msg#: 4278776 posted 11:53 am on Mar 9, 2011 (gmt 0)

Whenever I try to set a div to be 100% page height it always ends up using the window height what is the solution for this.




Msg#: 4278776 posted 8:25 pm on Mar 9, 2011 (gmt 0)

How about using a value in pixels instead of %?


5+ Year Member

Msg#: 4278776 posted 9:16 pm on Mar 9, 2011 (gmt 0)

because the page height varies


Msg#: 4278776 posted 1:23 am on Mar 10, 2011 (gmt 0)

All right. I think this thread might be the answer to your question:


Msg#: 4278776 posted 1:27 am on Mar 10, 2011 (gmt 0)

P.S. (it's a pity I can't edit my post, I often think of something in addition once I've posted) it's an old thread, but SuzyUK is still on this forum, so if you still have questions, help is not far away.


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4278776 posted 2:40 am on Mar 27, 2011 (gmt 0)

Can't say I fully understand the problem, but I think it's a matter of using min-height in a strategic spot.

The library entry [webmasterworld.com...] might have what you seek in a more elaborate fashion.

100% height is simple:
- the root has the window height as height
- any element you set to 100% height takes the height of it's DIRECT parent provided the element had an explicitly set height different from "auto" (which is the default).

So seek the outermost element that stretches with your content, give it min-height: 100% (it will be the largest of the content and the window height), then give all parents up to and including html height: 100% (they will be as high as the window in order to pass the size of the window down to the element that's stretching larger as needed.

When I do this, I like to make the stretching element far on the outside as those short elements that scroll away can be a pain to deal with.

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