CODEWITHSUNDEEP
css
Robert Kusznier
Robert Kusznier

Reputation: 6911

nested div not filling the screen

I have an inner of fixed width containing the content of variable size. I want the height of that inner-container to be as big as the content, and at least as big as the screen's height (when the content is smaller). The page also has a fixed size footer.

Normally I'd think of setting min-height: 100% to both inner and outer (root) containers, but that doesn't work in CSS.

The code I present below is a simplified example of the situation I have on a bigger page (with much more various elements in the root-container). A green inner-container is not filling the entire screen's height as I'd like it to be. I did manage for it to do so (for example by setting root-container's height instead of min-height, but then the rendering behaved wrongly when the content was bigger than the screen's height (you can quickly simulate that by changing the font-size to a bigger value, like 21px). I want to have it working (the green column filling at least the screen's height, black on it's both sides throught the whole height and the footer on the very bottom) in both cases.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0;
    }

    #root-container {
      min-height: 100%;
      background: black;
      color: white;
      margin-bottom: -200px;
    }

    #root-container:after {
      height: 200px;
      content: "";
      display: block;
    }

    #inner-container {
      min-height: 100%;
      width: 400px;
      background: green;
      color: white;
      font-size: 11px;
      margin-left: auto;
      margin-right: auto;
    }

    #footer {
      height: 200px;
      background: orange;
      color: black;
    }

    h1 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <div id="root-container">
    <div id="inner-container">
      <h1>Content</h1>

      And when the body finally starts to let go<br/>
      let it all go at once<br/>
      not piece by piece<br/>
      but like a whole bucket of stars<br/>
      dumped into the universe<br/>
      Whoh! Watcb it go!<br/>
      Good-bye small hands, good-bye small heart<br/>
      good-bye small head<br/>
      My soul is climbing tree trunks<br/>
      and swinging from every branch<br/><br/>

      They're calling on me<br/>
      they're calling on me<br/><br/>

      Do you think I'm an animal?<br/>
      Am I not?<br/>
      Do you like fur<br/>
      Do you wanna come over<br/>
      Are we captive only for a short time<br/>
      Is there splendor, I'm not ashamed<br/>
      Desire shoots through me<br/>
      Like birds singing<br/>
      (The way you move no ocean's waves were ever as fluid)<br/><br/>

      They're calling on me<br/>
      they're calling on me<br/>

      I hit the mark!<br/>
      I target moon, I target sky, I target sun<br/>
      Fall down on the world before it falls on you<br/><br/>

      Like beggars, like Stars<br/>
      like whores, us all<br/>
      Like beggars, like dogs<br/>
      Like Stars, us all<br/><br/>

      Shoot straight for my heart<br/>
      (And when you were near no sky was ever quite so clear)<br/><br/>

      Like stars, so small<br/>
      Like us, when we fall<br/>
      Like beggars, like whores<br/>
      Like lovers, Get Up!<br/>
      Get up, too far
    </div>
  </div>

  <div id="footer">
    <h1>Footer</h1>
  </div>
</body>
</html>

And the same example uploaded to JSFiddle: http://jsfiddle.net/gNT8m/

Upvotes: 0

Views: 851

Answers (1)

Nate
Nate

Reputation: 4948

This is a bug: children of parents with min-height can't inherit the height property.

There are many potential workarounds, but you're right that this should work the way you initially tried.

Update:

As to workarounds, the simplest that occurs to me is to set display: flex on your #root-container. I haven't cross-browser tested this solution, so you might want to investigate it further, but using flexbox is a good way to go.

See it working.

You'll want to add a few other niceties, like adding position: relative to your footer and adding some space (padding: <your footer's height>px) to your #inner-container to make sure your footer doesn't cover up any content.

Upvotes: 1

Related Questions