title: How to stretch a div from navigation bar to footer?
body: <p>I have made a very simple site. You can see the page (code below) here: <a href="https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html" rel="nofollow">https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html</a></p>
  
  <p>My problem is the content div (with the sample code, right below the navigation bar). I need it to reach until the footer. I need it to reach until the footer no matter how I resize the page, never going under it, nor leaving too much room between it and the footer.</p>
  
  <p>I would be ok with it not reaching the bottom if the content inside it does not require it do so, however, if the content is scrollable, I need it to reach until the footer. Also, I don't want the whole page to scroll, only this content div.</p>
  
  <p>I have tried many solutions (a container div, tables, jquery resizing, etc.) unsuccessfully, and am a loss to how this can be accomplished. So, I uploaded the basic code without my solutions to see if someone could help me out :) </p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
      &lt;style type="text/css"&gt;
  
      body {
         background: #e6e6e6; 
      }
  
      #title{
        margin:0 0 0 0;
        text-align: center; font-size:40px;
  
        font-family: "League-Gothic", Courier;
        color: #707070; font-weight:600;
      }
  
      #navbar ul { 
        margin: 0; padding: 5px; 
        list-style-type: none; 
        text-align: left; background-color: #005ab3; 
  
        border-top-left-radius: 5px; 
        border-top-right-radius: 5px;
      } 
  
      #navbar ul li {  
        display: inline; 
        font-family: Arial;
      } 
  
      #navbar ul li a { 
        text-decoration: none; 
        padding: .2em 1em; 
        color: #fff; 
        background-color: #005ab3; 
      } 
  
      #navbar ul li a:hover { 
        color: #005ab3; 
        background-color: #fff; 
      } 
  
      #content {
        background-color: #fff; font-family: Arial;
        border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
        padding: 5px; padding-left: 15px; padding-right: 15px;
  
        height: 70%;
        overflow: auto;
      }
  
      #footer {
        position: fixed;
        bottom: 0; left:0; width: 100%;
  
        background: #005ab3;
  
        line-height: 2;
        text-align: center; color: #fff;
        font-size: 15px; font-family: sans-serif; 
      }
  
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
        &lt;div id = "title"&gt;Title&lt;/div&gt;
  
        &lt;div id = "navBar"&gt;
          &lt;ul&gt; 
            &lt;li&gt;&lt;a id ="link1" href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a id ="link2" href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a id ="link3" href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt; 
          &lt;/ul&gt; 
        &lt;/div&gt;
  
        &lt;div id = "content"&gt;
  
          &lt;h1&gt; Sample content (1984)&lt;/h1&gt;
          &lt;p&gt;It &lt;/p&gt; 
          &lt;p&gt;The &lt;/p&gt; 
          &lt;p&gt;Inside &lt;/p&gt;
          &lt;p&gt;Outside,  &lt;/p&gt;
          &lt;p&gt;Behind  &lt;/p&gt;
          &lt;p&gt;Winston  &lt;/p&gt;
          &lt;p&gt;The &lt;/p&gt;
          &lt;p&gt; WAR IS PEACE &lt;/p&gt;
          &lt;p&gt; FREEDOM IS SLAVERY &lt;/p&gt;
          &lt;p&gt; IGNORANCE IS STRENGTH &lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;div id = "footer"&gt;Footer&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>