title: Make navigation div expand entire height
body: <p>I have a navigation div on the left of my page. I want it to span the entire height of the page. This is fine (and easy) if the content doesn't require the page to scroll, however, there are a few pages where I have lots of content, so the page must scroll. However, the div ends just a little bit below where the page did. </p>
  
  <p>Here's the basics of the HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; (Title) &lt;/title&gt;
          &lt;div id="header&gt;
              &lt;h1&gt; Header &lt;/h1&gt;
          &lt;/div&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="nav"&gt;
              (nav)
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
              (Content)
          &lt;/div&gt;
      &lt;/body
  &lt;/html&gt;
  </code></pre>
  
  <p>And the (I think) relevant CSS is: </p>
  
  <pre><code>body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100;
  }
  html{
    min-height: 100%;
    min-width: 100%;
    position:relative;
    margin: 0;
  }
  
  #nav {
    position: absolute;
    width: 110px;
    min-height: 100%;
    margin: 0;
    margin-top: 90px;
    padding-top: 10px;
    padding-left: 10px;
    overflow: hidden; 
  }
  </code></pre>
  
  <p>The content div expands all the way to the bottom of the screen, but not the nav div. Any idea what needs to change to make it look right? </p>
  
  <p>Screenshot
  <a href="https://i.stack.imgur.com/ZsNqb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZsNqb.png" alt="Screenshot"></a>
  </p>
  
  <p>EDIT: full base.html template</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;{% block title %} Title Goes Here {% endblock %}&lt;/title&gt;
      &lt;div id="header"&gt;
        &lt;h1&gt; {% block head %} Header Goes Here {% endblock %}&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="logo"&gt;
        &lt;img src="{{ MEDIA_URL }}logo.png" alt="logo" width="125" height="125"&gt;
        &lt;!--&lt;img src="http://www.tecnospotsolar.com/content/images/yingli_logo_1.png" alt="logo" width="270" height="81"&gt; --&gt;
      &lt;/div&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
      &lt;link href="{{ STATIC_URL }}layout1.css" rel="stylesheet" type="text/css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="nav"&gt;
        {% block nav %}
        &lt;ul&gt;
      &lt;li&gt;&lt;a href="/workflow/"&gt; Home &lt;/a&gt; 
      &lt;li&gt;&lt;a href="/workflow/new"&gt; New Entry &lt;/a&gt;  
      &lt;li&gt;&lt;a href="/workflow/list/request/"&gt; Requests &lt;/a&gt; 
      &lt;li&gt;&lt;a href="/workflow/list/approved/"&gt; Approved &lt;/a&gt; 
      &lt;li&gt;&lt;a href="/workflow/list/rejected/"&gt; Rejected &lt;/a&gt; 
      &lt;li&gt;&lt;a href="/workflow/list/fulfilment/"&gt; Fulfilment &lt;/a&gt; 
      &lt;li&gt;&lt;a href="/workflow/list/poa/"&gt; POA &lt;/a&gt;
      &lt;li&gt;&lt;a href="/workflow/list/confirmed/"&gt;  Confirmed &lt;/a&gt;
      &lt;li&gt;&lt;a href="/workflow/profile/"&gt; Profile &lt;/a&gt;
      &lt;/div&gt;
        &lt;/ul&gt;
        {% endblock %}
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
        {% block content %} Body Goes Here {% endblock %}
      &lt;/div&gt;
      &lt;div class="clear"/&gt;
  
       &lt;div id="login"&gt;
        &lt;a href="/workflow/login/"&gt; Login&lt;/a&gt;/&lt;a href="/workflow/logout/"&gt;Logout&lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And CSS...</p>
  
  <pre><code>body {
    font-family: Helvetica, Arial, sansserif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100;
  }
  
  head {
    min-width: 100%;
  }
  
  h1 {
    font-family: Helvetica, Arial, sansserif;
    font-size: 20px;
    font-weight: bold;
  }
  
  h2 {
    font-family: Helvetica, Arial, sansserif;
    font-size: 18px;
    font-weight: bold;
  }
  
  *{
    margin: 0;
  }
  
  html{
    min-height: 100%;
    min-width: 100%;
    position:relative;
    margin: 0;
  }
  
  html, body{ 
    height: 100%
  }
  
  ul{
    margin: 0;
    padding: 0;
  }
  
  .wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
  }
  
  .footer, .push{
    height: 4em;
  }
  
  /********* ID's ************/
  
  
  
  #nav {
    position: absolute;
    width: 110px;
    min-height: 100%;
    margin: 0;
    margin-top: 90px;
    padding-top: 10px;
    padding-left: 10px;
    border-right: 5px solid #00047A;
    border-left: 5px solid #EBDE95;
    font-weight: normal;
    background-color: #EDF3FE;
    font-size: 16px;
    overflow: visible;
  }
  
  #nav a:visited{
    color: #040638;
    font-weight: 700;
    text-decoration: none;
  }
  
  #nav a:link{
    color: #040638;
    font-weight: 700;
    text-decoration: none;
  }
  
  #nav ul{
    list-style: none;
  }
  
  #nav  ul li{
    height: 2em;
  }
  
  #nav ul li a{
    display: block;
    line-height: 2em;
  }
  
  #nav li:hover a{
    color: white; 
    font-weight: bold;
    text-decoration: none;
  }
  
  #nav ul li:hover{
    margin-left: -10px;
    padding-left: 10px;
    background-color: #13118C;
    width: 100%;
  }
  
  
  
  
  #content {
    position: absolute;
    padding-top: 20px;
    padding-left: 25px;
    margin-top: 95px;
    margin-left: 130px;
    min-height: 100%;
    min-width: 100%;
    background-color: #F5F5F5;
  }
  
  #content ul{
    padding-left: 15px;
  }
  
  #header {
    position: absolute;
    height: 60px;
    min-width: 100%;
    top: 0;
    background-color: #EDF3FE;
    border-bottom: 5px solid #00047A;
    border-left: 5px solid #EBDE95;
    border-top: 5px solid #EBDE95;
    padding-left: 250px;
    padding-top: 25px;
  }
  
  #logo{
    position: absolute;
    margin-top: -17px;
  
    padding-left: 100px;
  }
  
  #login{
    position: absolute;
    right: 0;
    padding-right: 10px;
    padding-top: 30px;
    font-size: 16px;
  }
  
  #warning{
    font-size: 16px;
    color: red;
  }
  
  /********** CLASSES *************/
  
  .field_error{
    background-color: #F9FFAD;
  }
  
  .button-container form,
  .button-container form div {
    display: inline;
  }
  
  .button-container button{
    display: inline;
    vertical-align: middle;
  }
  
  .clear{
    clear:both;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 0;
  }
  </code></pre>