0

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.

Community
  • 1
  • 1
machineghost
  • 33,529
  • 30
  • 159
  • 234

1 Answers1

1

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>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • yea, the actual fix that you did was setting html and body to `height: 100%;margin: 0;` , I would mention that – Scott Selby Jul 28 '16 at 19:57
  • Great answer, thanks! One question though: if I have `#myApp #inner #someDiv`, should `#someDiv` inherit the `height: 100%`? It doesn't seem to be doing so, and if I have to throw `height: 100%` on all the children that's not the end of the world. But if you know of anyway to make the `height` inherit that would be very handy. – machineghost Jul 28 '16 at 20:14
  • @machineghost you have the CSS value `inherit`. Also, using `position` (`relative` i.e.) on your inner elements would help. – Roko C. Buljan Jul 28 '16 at 20:15
  • @machineghost Also, don't forget that you have the `vh` and `vw` units. I.e: `height:100vh` will set an element to the height of your viewport. (Not sure if fits your requirements but...) – Roko C. Buljan Jul 28 '16 at 20:17
  • Awesome, thanks. I hadn't even heard of the `vh`/`vw` units; can't wait to check them out. – machineghost Jul 28 '16 at 20:26