title: Body not 100% height but 100% Viewport
body: <p><a href="https://jsfiddle.net/nprq5LLo/" rel="nofollow noreferrer">https://jsfiddle.net/nprq5LLo/</a></p>
  
  <p>Simple project I started working on , problem is that the body isnt 100% height of the document, its 100% of the viewport. Which is an issue since I want to use full-screen elements in future for it.</p>
  
  <pre><code>  html {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
  }
  
  body {
    background-size: 100% 100%;
    background-color: #000;
    color: white;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
  }
  </code></pre>
  
  <p>having html and body defined with 100% width and height and removing padding and margin did nothing to resolve the issue , i ran thru this type of questions in stackoverflow but none of the solutions were usefull for me.</p>
  
  <p>I've tried adding lorems to make the page scrollable ,but the actual height of the body is as much as the viewport is , the content below is visible though.</p>
  
  <p>Any ideas how we can solve this issue?</p>