<div> height 100% in nested div wont fill out

Forum Moderators: not2easy

Message Too Old, No Replies

<div> height 100% in nested div wont fill out

carsten888

8:14 am on Nov 24, 2005 (gmt 0)

to get a div on height 100%, the body needs to be 100% as well and to prevent content overflow in Firefox use min-height: 100%;
(someone thought me this recently in this forum (can't find post anymore)).
but when using a header the content div does no longer fill out to 100%.

how to fix this?

<body style="height: 100%; margin: 0px;">
<div style="min-height: 100%; background: purple;">
<div style="height: 100px; background: yellow;">header</div>
<div style="min-height: 100%; background: green; width: 100px;">content Lorem .onec vestibulum aliquet lorem. In eget sem a eros aliquet eleifend. Ut eget tellus. Proin eget lacus. Aenean sagittis lobortis sapien. Duis consequat varius
</div>
</div>
</body>

SilverLining

2:22 pm on Nov 28, 2005 (gmt 0)

does this help at all?
[quirksmode.org...]
prob something to do with your DTD?

SilverLining

2:29 pm on Nov 28, 2005 (gmt 0)

so basically just add the style to html tag too

html,body {
height: 100%;
}

carsten888

10:46 am on Dec 10, 2005 (gmt 0)

nope, doesn't work.

only in quircksmode it fills out, but much too much.

with html{height: 100%;} the bottom div (green) becomes 100% in height because its parent (purple container) is 100%. But what I want is to get it to fill the remaining part of 100%-100px.

same problem for width. relative and fixed sizes are not to be mixed.
say you want 3-column layout:
50% 100px 50%
that seems impossible in css2. for some things tables still rule!

maybe css3 will bring the solution to this and a 1000 other issues...

carsten888

11:50 am on Dec 13, 2005 (gmt 0)

the discussion about height: 100% has somehow moved to :
[webmasterworld.com...]