CODEWITHSUNDEEP
css
machineghost
machineghost

Reputation: 35740

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.

Upvotes: 0

Views: 435

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

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>

Upvotes: 1

Related Questions