title: Div Expand to Visually Fill Vertical Space
body: <p>I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.</p>
  
  <p>I used the <a href="http://ryanfait.com/sticky-footer/" rel="noreferrer">Sticky Footer</a> approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.</p>
  
  <p>I have tried several solutions which involved me adding <code>height:100%, height:auto; position:relative</code> but it did not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    background-color: yellow;
  }
  header {
    width: 100%;
    height: 150px;
    background-color: blue;
  }
  header nav ul li {
    display: inline;
    padding: 0 30px 0 0;
    float: left;
  }
  #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -30px 0;
    /* the bottom margin is the negative value of the footer's height */
    position: relative;
  }
  #wrapper #content {
    background-color: pink;
    width: 400px;
    height: 100%;
    margin: 0 0 -30px 100px;
    padding: 25px 30px 25px 30px;
  }
  footer {
    margin: -30px 0 0 0;
    width: 100%;
    height: 30px;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  
    &lt;header&gt;
      &lt;div id="logo"&gt;&lt;/div&gt;
  
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;About&lt;/li&gt;
          &lt;li&gt;Menu&lt;/li&gt;
          &lt;li&gt;Specials&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;div id="content"&gt;
      content
      &lt;br&gt;goes
      &lt;br&gt;here
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;footer&gt;footer&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>