How to make a div full screen and expand with its content as it overflows-CodePudding

I have a single root div that contains all the page content. My goal is:

when the content does not overflow at the bottom, to make the div take 100% of the height.
when the content does overflow at the bottom, I want the div to expand so that it encapsulates all the content.

I tried a lot of combinations with height and min-height but I struggle to make it. What I have currently is this :

<!DOCTYPE html>
<html>
<head>
<style>
  html, body, #root {
    height: 100%;
    margin: 0;
  }

  #root {
    background: yellow;
  }  
</style>
</head>
<body>
  <div id="root">
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
  </div>
</body>
</html>

But when you scroll to see the content that overflows, the background is gone, while I want it to grow with the content. How can I do this?

CodePudding user response：

Replace height: 100%; with min-height: 100vh;

CodePudding user response：

The unit vh expresses a percentage of the viewport height. So you can make the main div at least fill the window vertically like this:

  body, #root {
    margin: 0;
  }
  #root {
    background: yellow;
    min-height: 100vh;
  }