I am facing a challenge with a container that has a specified height and contains two nested divs. The first div has a height defined in pixels, and I want the second div to fill up the remaining space in the container, which is essentially 100% minus the height of the first div.
Is there a way to solve this issue without relying on JavaScript? While JavaScript can be used to adjust the container's height (which is how I ended up here), it seems like there should be a more fundamental solution without using JavaScript, as the problem could potentially cascade into other issues.
Example
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
While an answer has been provided for the original fiddle, simplifying the question led to new issues being introduced in the solution: http://jsfiddle.net/h3gsz/6/
I removed the inline-block styling and a max-width value, which caused problems with the positioning and width of the remaining content. This resulted in an unnecessary horizontal scrollbar. I am contemplating whether to create a new question for this problem or not.