title: div position absolute height not working
body: <p>I'm trying to create a layout with a header, a main content area and a footer.</p>
  <p>Both header and footer are fixed height but content area needs to fill the width and height (without scrollbars)</p>
  <p>the current code is <a href="http://jsfiddle.net/oterox/MS8Du/" rel="nofollow noreferrer">here</a></p>
  <pre><code>&lt;div class=&quot;outer&quot;&gt;
      &lt;header&gt;
          movistar ovacion
      &lt;/header&gt;
  
      &lt;div id=&quot;content&quot; &gt;
  
          &lt;section class=&quot;step-1&quot;&gt;
              
              &lt;div class=&quot;box&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;HOMBRE&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;box&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;MUJER&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;box&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;NIÑO&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;box&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;NIÑA&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/section&gt;
      
      &lt;/div&gt;
  
      &lt;footer&gt;
          footer
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The CSS:</p>
  <pre><code>html,body{
          height: 100%;
      }
  
      header {
          height: 160px;
          background: blue;
      }
  
      #content {
          
      }
  
      footer {
          height: 60px;
          position:absolute;
          width:100%;
          bottom:0; 
          background: green;
      }
  
  .outer {
      
  }
      .step-1 &gt; div {
          width: 50%;
          height: 50%;
          position: absolute;     
      }
  
      .step-1 &gt; div:first-child {
          background: #DDD;
          left: 0;
      }
      .step-1 &gt; div:nth-child(2) {
          background: #CCC;
          right: 0;
      }
      .step-1 &gt; div:nth-child(3) {
          background: #72CCA7;
          left: 0;
          bottom: 0;  
      }
      .step-1 &gt; div:nth-child(4) {
          background: #10A296;
          right: 0;
          bottom: 0;
      }
  </code></pre>
  <p>Right now the content area doesn't work as it should, the 4 boxes doesn't adapt to the height.</p>
  <p>I think i'm doing something wrong with div positions or clearings but i can't find the problem.</p>
  <p>How can i fix it? Is there a better way of doing this layout?</p>