title: How to extend div to the entire page?
body: <p>I am trying to set background color to the pages in my React app. I want to set a background color extending to the full page length and width but I cannot do that, for forms or tables extending beyond, I set height/width or min-height/min-width to 100% and I get the result for larger contents but for smaller contents,I get this:</p>
  
  <p>I want to have the entire page of blue color.</p>
  
  <p><a href="https://i.stack.imgur.com/u0Vuc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u0Vuc.png" alt="enter image description here"></a></p>
  
  <p>This is my css file</p>
  
  <pre><code>.body
  {
     margin:0px 0px 0px 0px;
     background-color:#4086ef;
     padding:10px;
     height:100%;
     width:100%;
  }
  </code></pre>
  
  <p>If I set height to 100vh, I get the undesired result but with contents going beyond the page.</p>
  
  <p>(Content rendering is dynamic so I don't know when the content will go beyond and when not).</p>
  
  <p><strong>EDIT:</strong>
  The table doesn't squeeze along when I compress the window and neither does the overflowing part follow the background color but the height follows the background color even when scrolled.</p>