title: div margin and position absolute
body: <p>Look at this example = <a href="https://codepen.io/anon/pen/zaXMXo" rel="nofollow noreferrer">https://codepen.io/anon/pen/zaXMXo</a></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>* {
    box-sizing: border-box;
  }
  html, body {
    height: 100%
  }
  .wrapper {
    background: red;
    min-height: 100%;
  }
  .left {
    position: absolute;
    width: 200px;
    top: 0;
    bottom: 0;
    background: yellow;
  }
  .content {
    background: blue;
    margin-left: 230px;
    margin-top: 30px;
    width: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="left"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
              hello content &lt;br /&gt;
              hello content &lt;br /&gt;
              hello content &lt;br /&gt;
              ...
     &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone tell me: </p>
  
  <p>1) why yellow block not at full height?</p>
  
  <p>2) why blue block margin-top add white space on top?</p>
  
  <p>how fix it?</p>