title: How can I set right height for the elements?
body: <p>I set <code>height</code> = 100% for <code>html</code> and <code>body</code>, but I see the vertical scroll. How can I fit my <code>body</code> without the scroll? </p>
  
  <p>Also, I placed into the <code>body</code> two <code>div</code> elements with <code>height</code> = <code>50%</code>, but I see the bottom border is out of the area of my <code>body</code>. Why does it happen and how can I fix it?</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>html, body {
        height: 100%;
      }
  
      body {
        border-color: #00cc00;
        border-width: thin;
        border-style: solid;
        min-height: 100%;
      }
  
      .div1 {
        border-color: #0099ff;
        border-width: thin;
        border-style: solid;
        height: 50%;
        width: 50%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="ru"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;title&gt;Sandbox&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="div1"&gt;&lt;/div&gt;
    &lt;div class="div1"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/AyEcf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AyEcf.png" alt="enter image description here"></a></p>