title: Stretching a content div (under a header) to full page length
body: <p>I've been battling with this problem for a while and I'd like to ask advice if any of you can help.</p>
  
  <p>I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
  I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.</p>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>    * {
      -ms-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   }
  
  html {
      height: 100%;
      border: 5px solid red;
      margin-bottom: -16px;
  }
  
  body {
      background-color: lightblue;
      height: 100%;
      border: 5px solid blue;
      margin: 0 0 -16px 0;
  }
  
  .wrapper {
      display: block;
      position: relative;
      background-color: green;
      width: 605px;
      margin: auto;
      height: 100%
  }
  
  .header {
      display: inline-block;
      background-color: blue;
      height: 120px;
      width: 450px;
      text-align: center;
      padding: 5px 0px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }
  
  .content {
      display: inline-block;
      background-color: red;
      padding: 10px 5px;
      width: 450px;
      height: 100%;
  </code></pre>
  
  <p>I've set borders to html and body just to see that I can stretch them properly, so please ignore those.</p>