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)
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: [webmasterworld.com...]
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)
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.