title: Make child element 100% height of the BODY element which is also 100%
body: <p>I'm trying to make the <code>&lt;body&gt;</code> element take up <em>at least</em> 100% height of the browser window but also expand to any content. I'm also trying to make its only <code>&lt;div&gt;</code> child element take up 100% of the <code>&lt;body&gt;</code> height as well.</p>
  
  <p><strong>Illustration</strong></p>
  
  <p>This is what is currently happening; Case A is the problem, Case B works as expected.</p>
  
  <p><a href="https://i.stack.imgur.com/LxjgV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LxjgV.png" alt="Example of what&#39;s happening"></a></p>
  
  <p>In Case A, the <code>div.page-content</code> (red box) should expand to the <code>body</code> (blue box), but it does not.</p>
  
  <p><strong>Code</strong></p>
  
  <p>Here's what I have.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html {
    height: 100%;
  }
  
  body {
    min-height: 100%;
    padding-top: 57px;
  }
  
  .page-content {
    height: 100%;
  }
  </code></pre>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;&lt;/nav&gt;
      &lt;div class="page-content"&gt;
        &lt;div class="page-container"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Note that the <code>nav</code> element is statically positioned and thus doesn't affect layout.</p>
  
  <p>Body doesn't have a <code>height</code> specified because I want to height to be <code>auto</code> so it stretches to the content, but I don't want the height to be less than the browser window.</p>
  
  <p>Body behaves as expected, it's the <code>div.page-content</code> that is only sizing to its own contents instead of stretching to the height of the <code>body</code>.</p>
  
  <p>Is there a way to achieve the desired behavior without using javascript?</p>