title: Height 100% not working with fixed footer div
body: <p>css:</p>
  
  <pre><code>body {
      height: 100%;
      background-color: red;
  }
  .mframe {
      display: block;
      position: relative;
      width: 1024px;
      min-height: 100%;
      margin-left: auto;
      margin-right: auto;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: 100;
  }
  .header {
      display: block;
      position: relative;
      float: left;
      width: 1024px;
      height: 125px;
      margin-top: 25px;
      color: #FFF;
      background-color: #666;
  }
  .navbar {
      display: block;
      position: relative;
      float: left;
      width: 1024px;
      height: 55px;
      margin-top: 70px;
      font-size: 16px;
      line-height: 16px;
      font-weight: bold;
      color: #000;
      background-color: #171717;
  }
  .content {
      display: block;
      position: relative;
      float: left;
      width: 1024px;
      height: 100%;
      min-height: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 250px;
      background-color: #333;
      font-size: 20px;
      font-family: "Lusitana", serif;
      color: #FFF;
  }
  .footer {
      display: block;
      position: fixed;
      width: 100%;
      height: 50px;
      bottom: 0px;
      left: 0px;
      color: #FFF;
      text-align: center;
      background-color: #111111;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="mframe"&gt;
      &lt;div class="header"&gt;
          My Header
          &lt;div class="navbar"&gt;
              Navbar
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          Some Content goes here
      &lt;/div&gt;
      &lt;div class="footer"&gt;
          My Footer goes here
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have everything fine and if the content is more than the screen. I can scroll and the footer stays fixed. But if the content is less than the screen. I want my content div to fill up until the footer so I have a background color just on this div all the way down to the footer.</p>
  
  <p>Here is my JSFiddle:
  <a href="http://jsfiddle.net/8BallDzigns/v6fV9/5/" rel="nofollow">http://jsfiddle.net/8BallDzigns/v6fV9/5/</a></p>
  
  <p>Short Update:</p>
  
  <p>I was thinking my fixed footer is causing a problem. But if I remove my footer from the html and leave just the content div in place. The mframe div is taking the whole page, but the content will not fill up to take up the remaining amount of the mframe div. I don't understand why the height and min-height is not working. I have tried height 100% and min-height 100% and height inherit. But none will work in any combination. I also tried margin-bottom: 0px and padding on the bottom. Still same situation.</p>