I currently have 3 different divs nested within each other:
<div class="a">
<div class="b">
</div>
<div class="c">
</div>
</div>
Here is the current CSS styling applied to these divs:
.a
{
height:300px;
border:solid 2px red;
}
.b
{
height:100px;
border:solid 3px blue;
}
.c
{
height:100%;
border:dashed 3px gray;
}
The red div's height is determined dynamically via JavaScript (when the document is ready). (It represents a popup window whose height should be proportionate to the user's screen size.)
The blue div has a fixed height (representing a title).
- Question/Problem :
Is there any CSS solution to make the gray div's height take up the remaining space available (below the red div)
so that it appears like this:
Click here for the test fiddle.
Note:
Supported browsers: IE 8+