title: How to make a div autofill empty space in html page
body: <p>I have written a html page where i want a header,content,footer. All these three portions are enclosed in divs and it looks as below</p>
  
  <p>But i observe that the header div  does not occupy the full space which was provided(ie.,height: 50% in  CSS)</p>
  
  <p>and the content div (containing table) does not occupy the space available between header and footer divs though a height of 100% is spaecified in CSS</p>
  
  <p>The html written is as follows.Am i missing something .</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;Html with divs&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  h1,h2,h3,h4,h5,h6{
      font-size:100%;
      font-weight:normal;
  }
  q:before,q:after{
      content:'';
  }
  abbr,acronym{
      border:0;
  }
  
  html{
      height:100%;
  
  }
  body{
      font-family:Arial,Verdana,sans-serif;
      font-size:0.75em;
      color:#333;
      width:100%;
      margin:0 auto;
      padding:0px;
  }
  
  
  #header1
  {
      background-color: steelblue;
      height: 50%;
  }
  
  
  h1{
      font-family:Calibri, Arial, Verdana, sans-serif;
      font-size:2em;
      width:520px;
  }
  
  
  #content
  {
      background-color: orange;
      padding: 5px;
  height:100%;
  
  }
  
  #content table
  {
  width:100%;
  }
  
  
  
  #footer {
          position:absolute;
          bottom: 0px;
      width: 100%;
          height:70px;
          }
  #footer div#navigation {
      background: steelblue;
          height: 70px;
      width: 100%;
  }
  
  #footer div#navigation div {
      margin: 0 auto;
      width: 100%;
  }
  
  #footer div#navigation div p {
      color: #995870;
  
          color:white;
          width:100%;
          align:center;
          font-size: 11px;
      margin: 0;
      text-align: center;
  
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div id="header1"&gt;
          &lt;p align="center"&gt;Header1&lt;/p&gt;
          &lt;p align="center"&gt;Header2&lt;/p&gt;
          &lt;p align="center"&gt;Header3&lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
  
                  &lt;table bgcolor="#fadd09" align="center" style="color:white"&gt;
                      &lt;tr&gt;&lt;td&gt;Text1 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value1"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text2 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value2"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text3 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value3"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text4 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value4"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text5 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value5"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text6 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value6"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text7 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value7"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text8 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value8"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text9 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value9"/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;Text10 here&lt;/td&gt;&lt;td&gt;  &lt;input type="text" name="value10"/&gt;&lt;/td&gt;&lt;/tr&gt;
  
                  &lt;/table&gt;
  
  
      &lt;/div&gt;
  
              &lt;!--Footer--&gt;
          &lt;div id="footer"&gt;
              &lt;div id="navigation"&gt;
                  &lt;p style="color: ivory;font-size: 15px;"&gt;footer-head&lt;/p&gt;
                  &lt;div style="float: inherit"&gt;
                      &lt;p&gt;The footer&lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>