I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this.
Initially, I enclosed the header and content within a container div set to a height of 100%, which worked well for the most part. But I struggled to make the content div stretch to the bottom of the container div without causing a scrollbar due to the space taken up by the header at the top of the page.
Below is a wireframe illustration to provide more clarity on what I am aiming to accomplish...
Additionally, here is a simple CSS code snippet that I have been experimenting with. While it functions correctly, there seems to be a persistent scrollbar that aligns with the height of the header region...
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}