title: How to set the height of a div to match the remaining height
body: <p>I have an HTML page which is divided into 4 sections.</p>
  
  <ol>
  <li>Header</li>
  <li>Menu</li>
  <li>Content</li>
  <li>Footer</li>
  </ol>
  
  <p>I am using 1 div for each section and 1 div which wraps all the 4 divs.</p>
  
  <p>My header's height is 50px, the menu's height is 50px, and the footer's height is 20px.</p>
  
  <p>Then I try setting the menu's height to 100%. Menu div is taking the height of its container which is creating scrollbars in my page.</p>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>html, body {
      margin: 0px;
      height: 100%;
      width: 100%;
      min-width: 1024px;
      min-height: 500px;
  }
  
  #container {
      width: 100%;
      height: 100%;
  }
  
  #header {
      width: 100%;
      height: 50px;
  }
  
  #menu {
      width: 100%;
      height: 50px;
  }
  
  #content {
      width: 100%;
      height: 100%;
  }
  
  #footer {
      width: 100%;
      height: 20px;
  }
  </code></pre>
  
  <p>Is it possible with CSS alone or I have to use JavaScript also?</p>