title: div loses its full height if another div has a margin
body: <p>I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.</p>
  
  <p>How can I stretch all div's height to full document height, regardless of margin of any of them?    </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>* {
    .margin: 0;
  }
  html {
    background: red;
    height: 100%;
  }
  body {
    max-width: 1366px;
    background: blue;
    height: 100%;
  }
  #divleft {
    float: left;
    background: lightblue;
    width: 40%;
    height: 100%;
  }
  #divmiddle {
    float: left;
    margin-top: 25px;
    background: lightgreen;
    width: 40%;
    height: 100%;
  }
  #divright {
    float: right;
    background: green;
    width: 20%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='divleft'&gt;left&lt;/div&gt;
  &lt;div id='divmiddle'&gt;middle&lt;/div&gt;
  &lt;div id='divright'&gt;right&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="https://jsfiddle.net/um1o4xm7/" rel="nofollow noreferrer">fiddle</a></p>