machineghost machineghost - 4 months ago 7
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
html
/
body
/
#myApp
: they all have 100% page height. My problem is the
div#inner
: it doesn't grow to the height of its parent (even if I give it
height: 100%
).

I believe this is happening because
#myApp
is positioned absolutely, and thus has no height for
#inner
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
#inner
to take its height from
#main
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

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

#myApp{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  background:red;
}

#inner{
  height:100%;
  background:gold;
}
<div id="myApp">
  <div id="inner"> 
    Inner should be gold and it is!
  </div>
</div>

Comments