title: How to use 100% DIV height with HTML5?
body: <p>I have tried following many articles and used many links in SO but I cannot fix my CSS of my page. The page can be seen here: <a href="http://tinyurl.com/d3ru8tf" rel="nofollow noreferrer">http://tinyurl.com/d3ru8tf</a></p>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/mHLmR.jpg" alt="enter image description here"></p>
  
  <p>My CSS</p>
  
  <pre><code>html, body {
     height:100%
  }
  
  body{
     line-height:1;
     color:#454545;
     background:url(/assets/imgs/bg.png);
     font:11px Tahoma,Arial,sans-serif
  }
  
  #soul{
     display:block;
     margin:0 auto;
     width:920px;
     background:url(/assets/imgs/back.png) repeat-y right #fff;
     padding:0;
     position:relative;
     height:100%
  }
  </code></pre>
  
  <p>My HMTL5</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
         &lt;meta charset="UTF-8"&gt;
         &lt;title&gt;&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
         &lt;div id="soul"&gt;
  
            This is my content which does not sit fluid.
  
         &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>