title: HTML5 page 100% height Issue
body: <p>I am trying to create a App page which will auto fit to the height. following in the HTML code used in the page</p>
  
  <pre><code>&lt;div id="main" role="main"&gt;
  &lt;header class="header"&gt;
      &lt;div class="allPageHeaderImg"&gt;&lt;/div&gt;
      &lt;div class="logo"&gt;&lt;img src="images/logo-viva.png" alt="VIVAGREL Logo" /&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;section class="allContent"&gt;
      &lt;div class="button-links-subpg"&gt;
          &lt;ul class="buttons"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/graceButton.png" alt="cardiac-button" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/timiButton.png" alt="cardiac-button" /&gt;&lt;/a&gt;&lt;/li&gt;      
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;footer id="footer"&gt;
      &lt;div id="footerBg"&gt;
          &lt;div class="footer-links"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Back&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS used</p>
  
  <pre><code>html {
    height:100%!important;
    width:100%;
    padding:0;
    margin:0;
  }
  
  body {
    margin:0;
    padding:0;
    width:100%;
    height:100%!important;
  }
  
  #main {
    height:100%;
    margin:100%;
    margin:0 auto;
    padding:0;
    background:#fff;
  }
  
  .header {
    height:145px;
    width:100%;
    background:url(../images/header-repbg-320.png) left top repeat-x;
    display:block;
    display:inline-block;
  }
  
  .allContent {
    width:100%;
    border:0 solid green;
    height:100%;
    min-height:100%;
    vertical-align:middle;
    display:block;
    display:inline-block;
  }
  
  #footer {
    background:url(../images/footer-repbg-320.png) bottom left repeat-x;
    height:90px;
    width:100%;
    display:block;
    display:inline-block;
  }
  </code></pre>
  
  <p>My problem is, the whole page is only consuming half of the height of the page leaving a awkward space below footer, </p>
  
  <p>Question: How to make the contents auto fit itself to the height of the page?</p>