title: CSS. Body height equal to document height
body: <p>in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.</p>
  
  <p>How, using css, to  force the body height to follow the height of the document.</p>
  
  <p><a href="https://jsfiddle.net/swed/ckzwsLcn/" rel="nofollow noreferrer">Example on jsfiddle</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>body, html {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .main {
    border: 1px solid red;
    height: 100%;
  }
  .ab {
    left: 2em;
    top: 2em;
    right: 10em;
    height: 150vw;
    position: absolute;
    border:1px solid yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
   &lt;div class="ab"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>upd.
  is looking for an css solution.
  On JS (jQuery), it can be done some like this:</p>
  
  <pre><code>$("body").height($(document).height());
  </code></pre>