title: Child (with relative positioning) of html-element with min-height 100% does not apply height 100%
body: <p>I am building a site with a header that covers 100% of the height of the browser window. This works with no problem when I set the html-element with height: 100%. </p>
  
  <p>However, as I have a CSS-overlay on the site as well, I need to have the html-element set to min-height: 100% in order for the overlay to stretch the entire page when the page is scrolled.</p>
  
  <p>But when I set the html-element to min-height: 100%, the height of the header is reduced to the height of the only child element of the header with relative positioning and fixed height.</p>
  
  <p>It also works if I set the header with absolute positioning, but I don't want to go that way because it messes up the positioning of the rest of the site (which I have designed to start below the header, not behind.</p>
  
  <p>I have put together a fiddle to illustrate my problem: </p>
  
  <pre><code>&lt;header id="header"&gt;  
  &lt;div class="header-head"&gt;I am the header head&lt;/div&gt;
  &lt;div class="header-content"&gt;I am the header content&lt;/div&gt;
  &lt;div class="header-footer"&gt;I'm the header footer!&lt;/div&gt;
  &lt;/header&gt;   
  
  &lt;div class="content"&gt;
  &lt;h1&gt;This is the page content&lt;/h1&gt;
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint blanditiis perspiciatis nesciunt possimus minus molestiae culpa necessitatibus atque ut eveniet id magnam delectus reprehenderit! Ad atque aperiam rerum quas vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit esse nihil iusto ea natus aliquam enim ducimus deleniti vitae quibusdam
  &lt;/div&gt;
  
  html, body {
      margin: 0;
      height: 100%;
  }
  
  body {
      font-family: 'Open Sans', sans-serif;
      color: black;
      position: relative;
      height: 100%;
      width: 100%;
  }
  
  #header {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      position: relative;
  }
  
  .header-head {
      width: 100%;
      height: 68px;
      background-color: green;
      position: absolute;
      text-align: center;
  }
  
  .header-content {
      width: 100%;
      height: 15%;
      top: 30%;
      background-color: blue;
      position: absolute;
      text-align: center;
  }
  
  .header-footer {
      width: 100%;
      height: 20%;
      position: absolute;
      bottom: 0; 
      left: 0;
      background-color: red;
      text-align: center;
  }
  
  .content {
      margin: 30px;
  }
  
  h1 {
      font-family: 'Federo', sans-serif;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ekufas/n5noj2bj/3/" rel="nofollow">JSFiddle showing the problem</a></p>
  
  <p>Does anyone have an idea if it is possible to solve this given the limitations described above?</p>
  
  <p>Any help is highly appreciated!</p>