title: HTML CSS Height 100% expanding beyond the size of the page
body: <p>I am having a bit of a nightmare with the CSS on a page that I am working on. I have two div tags a header and a main content the header is set to a height of 250px and the main is then set to a height of 100%. I have also set the height on the html and body to 100% as well in order to satisfy the issue with a container set to 100% in the page. </p>
  
  <p>The issue is that I now have a page that exceeds the size of the browser and show a scroll and I do not want to remove the scroll bar because the page may exceed the size of the browser.</p>
  
  <p><strong>HTML CODE</strong>:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Test Page Height 100% Issue&lt;/title&gt;
  
  &lt;link href='../style/test.css' rel='stylesheet' type='text/css' /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class='head'&gt;Header&lt;/div&gt;
  
  &lt;div class='content'&gt;Main Content&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override">
  
  html {
      height:100%;0
  }
  
  body {
      height:100%;
  }
  
  div.head {
      width:100%;
      height:250px;
  }
  
  div.content {
      width:100%;
      height:100%;
  }
  
  </pre>
  
  <p>Can anyone help me to get this all on one page set to the maximum size of the page without scroll bars, height 100%.</p>