Currently in the process of building a new website and below is the initial code draft. Encountering an issue with the bottom content div. When there is less content, the bottom div fills up the remaining browser space just fine. However, when more content is added to the bottom div (resulting in page scroll), the background of the content div does not continue as expected. Seeking assistance in resolving this problem.
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
#header {
height: 150px;
background: grey;
}
#content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
background-color: brown;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<p>body content</p>
...
// More body content here
...
</div>
</div>
</body>
</html>