Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

100% page height NOT window height



11:53 am on Mar 9, 2011 (gmt 0)

5+ Year Member

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.



8:25 pm on Mar 9, 2011 (gmt 0)

How about using a value in pixels instead of %?


9:16 pm on Mar 9, 2011 (gmt 0)

5+ Year Member

because the page height varies


1:23 am on Mar 10, 2011 (gmt 0)

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


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.


2:40 am on Mar 27, 2011 (gmt 0)

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

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month