machineghost machineghost - 4 years ago 82
CSS Question

CSS Height (Inside Absolutely Positioned Element)

I'm using the "100% page height" pattern from this SO answer:

CSS Div stretch 100% page height

In other words I have a basic DOM structure of:

<hmtml> // has min-height: 100% and position: absolute
<body> // has height: 100%
<div id="myApp"> // has // has position:absolute/top: 0/bottom:0
<div id="inner"> // has no styles (or height: 100%; same difference)

Everything works great with
: they all have 100% page height. My problem is the
: it doesn't grow to the height of its parent (even if I give it
height: 100%

I believe this is happening because
is positioned absolutely, and thus has no height for
to inherit. Is there any way to fix this without adding
position: absolute; top: 0; bottom:0
to every nested element? It seems like if I can somehow get
to take its height from
I can get all of its children to inherit that height ... but because of the absolute positioning I can't figure out how to do that.

Any help would be appreciated.

Answer Source

html, body{ height:100%; margin:0; }

  top:0; bottom:0; left:0; right:0;

<div id="myApp">
  <div id="inner"> 
    Inner should be gold and it is!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download