Check out my code snippet on JSFiddle:
<div id="wrapper">
<div id="yellow">variable height (I put 200px but can change in realtime)</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:100%;
height:100%;
position:relative;
}
#yellow {
width:100%;
height:200px;
background-color:yellow;
}
#red {
position:absolute;
top:200px;
bottom:0;
min-height;250px;
left:0;
width:100%;
background-color:red;
}
This layout works well when the yellow bar has a static height, but in my project, the height may change dynamically.
(please refrain from using JavaScript in the solution)