I only have one main div that holds all the content on my page. My aim is to achieve:
- When the content doesn't go beyond the bottom, I want the div to take up 100% of the height.
- If the content exceeds the bottom, then I want the div to expand and encompass all the content.
I've experimented with various combinations using height and min-height, but I'm having difficulty getting it right.
Currently, this is what I have :
<!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>
<!-- more content here -->
</div>
</body>
</html>However, when you scroll down to view the overflowing content, the background disappears instead of growing with the content. How can I make it work as intended?