Welcome to WebmasterWorld Guest from 54.224.148.71

Forum Moderators: not2easy

Message Too Old, No Replies

100% page height NOT window height

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

Full Member

5+ Year Member

joined:Aug 17, 2007
posts: 320
votes: 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.

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

Junior Member

5+ Year Member

joined:Jan 18, 2011
posts: 136
votes: 0


How about using a value in pixels instead of %?
9:16 pm on Mar 9, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Aug 17, 2007
posts: 320
votes: 0


because the page height varies
1:23 am on Mar 10, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 18, 2011
posts: 136
votes: 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)

Junior Member

5+ Year Member

joined:Jan 18, 2011
posts: 136
votes: 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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 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.