I am facing a challenge with designing a webpage that has a header with dynamic height and a content area. The goal is for the content to fill up the remaining space on the page, even if there isn't enough text.
This is a common issue that many people have asked about, and typical responses include code snippets like this:
html, body {
height: 100%;
}
.header {
height: 50px;
background-color: #ff0;
}
.content {
min-height: 100%;
background-color: #ccc;
}
However, my problem is that the .content area does not accurately expand to fill the rest of the page as expected. Instead, it seems to take up the entire screen height, causing me to scroll to see the bottom of the .content.
You can view the code here: http://jsbin.com/bilux/1/edit
Currently, when I set the .content height to 100%, a scrollbar appears:
Edit:
Thank you for suggestions on how to solve this with a fixed header height! However, is there a way to achieve this without knowing the exact height of my header?