title: Make the BODY DIV Fill the Available Area
body: <p>I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the <code>DIV</code> named <code>body</code> to fill the available space after making room for the <code>header</code> and thus anchoring the <code>footer</code> to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.</p>
  
  <p><em>I would like a solution that would work if the browser supported HTML5 and one if it didn't</em></p>
  
  <p><em><strong>Please note I've inlined comments in the CSS to try and explain what I've tried.</em></strong></p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;@ViewBag.Title - Title&lt;/title&gt;
          &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          @Styles.Render("~/Content/css")
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p class="site-title"&gt;@Html.ActionLink("Title", "Index", "Home")&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div id="body"&gt;
              @RenderSection("featured", required: false)
              &lt;section class="content-wrapper main-content clear-fix"&gt;
                  @RenderBody()
              &lt;/section&gt;
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p&gt;&amp;copy; @DateTime.Now.Year - ACME. All rights reserved.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="float-right"&gt;
                      &lt;ul id="social"&gt;
                          &lt;li&gt;&lt;a href="http://facebook.com" class="facebook"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://twitter.com" class="twitter"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
  
          @RenderSection("scripts", required: false)
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>body {
      /* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
      /* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
  
      /*height: fill-available;*/
      /*height: 100%*/
  }
  
  /* general layout
  ----------------------------------------------------------*/
  .float-left {
      float: left;
  }
  
  .float-right {
      float: right;
  }
  
  .clear-fix:after {
      content: ".";
      clear: both;
      display: block;
      height: 0;
      visibility: hidden;
  }
  
  /* main layout
  ----------------------------------------------------------*/
  .content-wrapper {
      margin: 0 auto;
      max-width: 960px;
  }
  
  #body {
      background-color: #efeeef;
      clear: both;
      padding-bottom: 35px;
  
      /* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
      /* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
  
      /*height: fill-available;*/
      /*height: 100%*/
  }
  
  .main-content {
      /*background: url("../Images/accent.png") no-repeat;*/
      padding-left: 10px;
      padding-top: 30px;
  }
  
  .featured + .main-content {
      /*background: url("../Images/heroAccent.png") no-repeat;*/
  }
  
  footer {
      clear: both;
      background-color: #e2e2e2;
      font-size: .8em;
      height: 100px;
  }
  
  /* site title
  ----------------------------------------------------------*/
  .site-title {
      color: #c8c8c8;
      font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
      font-size: 2.3em;
      margin: 20px 0;
  }
  
      .site-title a, .site-title a:hover, .site-title a:active {
          background: none;
          color: #c8c8c8;
          outline: none;
          text-decoration: none;
      }
  
  /* social
  ----------------------------------------------------------*/
  ul#social li {
      display: inline;
      list-style: none;
  }
  
      ul#social li a {
          color: #999;
          text-decoration: none;
      }
  
  a.facebook, a.twitter {
      display: block;
      float: left;
      height: 24px;
      padding-left: 17px;
      text-indent: -9999px;
      width: 16px;
  }
  
  a.facebook {
      background: url("../Images/facebook.png") no-repeat;
  }
  
  a.twitter {
      background: url("../Images/twitter.png") no-repeat;
  }
  </code></pre>