title: CSS header, menu, content and footer position
body: <p>I have the following HTML and CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
    padding: 0px;
    border: none;
  }
  
  html,
  body {
    background-color: yellow;
    height: 100%;
  }
  
  #header {
    position: absolute;
    height: 100px;
    width: 100%;
    background: #335599;
    border-bottom-color: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    z-index: 100;
  }
  
  #footer {
    height: 60px;
    width: 100%;
    background-color: #dd1155;
    border-top-color: #ffffff;
    border-top-style: solid;
    border-top-width: 1px;
    z-index: 1000;
  }
  
  #wrap {
    position: relative;
    height: 100%;
  }
  
  #wrap_content {}
  
  .undef {
    width: 100%;
  }
  
  .top_h {
    height: 100px;
  }
  
  .bottom_h {
    height: 60px;
  }
  
  #page_content {
    padding-left: 150px;
    position: relative;
    color: #FFFFFF;
    background-color: #000000;
  }
  
  #menu {
    height: 100%;
    position: relative;
    float: left;
    background-color: #1188FF;
    border-right-color: #ffffff;
    border-right-style: solid;
    border-right-width: 1px;
    z-index: 10;
  }
  
  #menu ul {
    list-style: none;
    display: block;
    min-height: 200px;
  }
  
  #menu ul li {
    width: 150px;
    height: 25px;
    padding-top: 10px;
    padding-bottom: 4px;
    text-align: center;
    background-color: #992277;
    border-bottom-color: #000000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-family: Cambria;
  }
  
  #menu ul li:hover {
    background-color: #167322;
    color: #ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrap"&gt;
  
    &lt;div id="header"&gt;&lt;/div&gt;
  
    &lt;div class="undef"&gt;
      &lt;div class="top_h"&gt;&lt;/div&gt;
  
      &lt;div id="menu"&gt;
        &lt;ul&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
          &lt;li&gt;Menu item&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="bottom_h"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="page_content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat
          eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue
          orci quis vestibulum. Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue.
          Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
        &lt;/p&gt;
  
  
        &lt;div class="bottom_h"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div id="footer"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to create a page only by using css that has the following:</p>
  
  <ol>
  <li>header height = 100px; must be always on the top of the page(this part is working fine)</li>
  <li>footer height = 60px; must be always on the bottom of the page (even if the doesn't have enough content. If the page content or the menu have to much content and the browser scroll bar is displayed then the footer still has to be positioned on the bottom).</li>
  <li>the menu must be in the left of the page and has a width of 150px with elements defined as in the example(this part is also working fine)</li>
  <li>the page content should extend on the remaining space (it is displayed with black. When all the remaining space is black instead of yellow then it should be ok)</li>
  </ol>
  
  <p>Also the page should dynamically change if the browser window size is changed. The solution should be browser compatible but if it works for firefox or/and chrome then all is ok.</p>
  
  <p>I tried to do this using a lot of tricks but none of them worked. Is it possible to do something like this using only css 2.0?</p>