title: css wrapper is not taking 100% height of whole page
body: <p>Well I thought that would be an easy thing and I'll do it in five minutes, but it took me now hours, so I hope you can help me with this silly and often asked question.</p>
  
  <p>I'm trying to set the height of my wrapping div to 100%. Inside the wrapper, I have a <code>header, content and footer</code> which all have some height. I also have a div called "slider" inside my content div, which should stick on the contents top.</p>
  
  <p>My problem is that the wrapping div only takes the height of my browser window instead of the whole page.</p>
  
  <p>To fit the slider div to top of the content div, I set <code>position:relative;</code> to content div and <code>position:absolute;</code> to slider div. And there appears my second problem. The absolute sliding div is overlapping the rest of the content, because the rest of the content jumps to the top because of the absolute positioning of slider div.</p>
  
  <p>My wrapper div styling looks like this:</p>
  
  <pre><code>#wrapper{
      width:100%;
      height:100%;
      position:relative;
      background:green;
  }
  </code></pre>
  
  <p>And the content and slider div looks like this:</p>
  
  <pre><code>#slider{
      /* random image from google */
      background:url('http://makuwi.ch/wahl_informatik/download/carla_m/handball7.jpg') no-repeat;
      background-size:cover;
      width:100%;
      height:45%;
      position:absolute;
      top:0;
  }
  
  #container{
      width:50%;
      height:70%;
      background:orange;
      margin-left:auto;
      margin-right:auto;
      position:relative;
  }
  </code></pre>
  
  <p>I prepared a <a href="http://jsfiddle.net/wq5zrcos/1/" rel="nofollow noreferrer">jsFiddle</a> with the relevant code to demonstrate you my problem.</p>
  
  <p>Collectively, I have 2 problems:</p>
  
  <ol>
  <li>The wrapper div does not take the 100% height of the page</li>
  <li>The slider div overlappes the rest of my content</li>
  </ol>
  
  <p>As I said before I first thought I'd fix this in a few minutes but now I'm here asking this question because I'm not able to fix it.</p>
  
  <p>Suggestions appreciated :)</p>
  
  <p><strong>EDIT:</strong> Since I have two questions in 1 SO question, I got two different answers.</p>
  
  <p>The solution for my first problem is this one: <a href="https://stackoverflow.com/a/32978655/2060526">Solution 1</a> <br />
  The solution for my second problem is this one: <a href="https://stackoverflow.com/a/32979000/2060526">Solution 2</a></p>