title: How to make a div fill the remaning vertical space using css
body: <p>I am attempting to make a standard website layout with a <em>header</em>, a <em>navigation bar</em> a body (on the right of the <em>navigation bar</em>) and a <em>footer</em>.</p>
  
  <p>Now I have so far done this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;style type="text/css" media="screen"&gt;
  
              .header {
                  float: top;
                  width: 100%;
                  height: 75px;
              }
  
              .navbar {
                  float: left;
                  width: 20%;
                  height: 100%;
                  height: 100%;
                  min-height:100%;
                  overflow: scroll;
              }
  
              .body {
                  float: right;
                  width: 80%;
                  height: 100%;
                  min-height:100%;
                  overflow: scroll;
              }
              .footer {
                  float: bottom;
                  width: 100%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="header"&gt; Header &lt;/div&gt;
          &lt;div class="navbar"&gt; Nav Bar &lt;/div&gt;
          &lt;div class="body"&gt; Body &lt;/div&gt;
          &lt;div class="footer"&gt; Footer&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>which produces this:</p>
  
  <p><img src="https://i.stack.imgur.com/XXyJP.png" alt="enter image description here"></p>
  
  <p>Now if we check the CSS:</p>
  
  <pre><code>.navbar {
  
      float: left;
      width: 20%;
      height: 100%;
      min-height: 100%;
      overflow: scroll;
  }
  
  .body {
      float: right;
      width: 80%;
      height: 100%;
      min-height: 100%;
      overflow: scroll;
  }
  </code></pre>
  
  <p>As you can see I have tried to set the <em>height</em> and <em>min-height</em> of both the body and <em>nav bar</em> to fill the remaining vertical space i.e:</p>
  
  <p><img src="https://i.stack.imgur.com/6lqO8.png" alt="enter image description here"></p>
  
  <p>Yet it doesnt affect it. However if I do <code>height: 500px</code> it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):</p>
  
  <p><img src="https://i.stack.imgur.com/tJY0T.png" alt="enter image description here"></p>
  
  <p>So basically I am asking how would I be able to make the <code>divs</code> fill the vertical space that's left over without using some hard-coded value i.e <code>100px</code> rather I would want to do it in percentages thus the page will look the same on all browsers</p>