DIv filling remaing vertical space, even with div above has dynamic height? - css

Question

Here is my fiddle:
http://jsfiddle.net/nom4mxLt/
<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 works good when yellow bar has static height, which is not the case in my work.
(without using JS please !)

Answer 1

You can use flexbox with align-items: stretch
http://jsfiddle.net/nom4mxLt/3/
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:300px;
height:100%;
position:relative;
display: flex;
flex-flow: column;
}
#first {
width:300px;
height:300px;
background-color:#F5DEB3;
}
#second {
background-color:red;
flex-grow:1;
}
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>

Answer 2

you may use flex for this kind of layout:
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
height:100%;
}
#yellow {
width:100%;
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<div id="yellow">variable height <br/> any height but maybe a max-height could come handy to avoid red one to disseapear</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
To allow wrapper to grow, then min-height can come also usefull
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
min-height:100%;
}
#yellow {
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<h1>test and resize me in full page mode </h1>
<div id="yellow"> variable height <br/> any height<br/> but maybe a max-height<br/> could come handy <br/>to avoid red one to disseapear<br/> or min-heigh on wrapper</div>
<div id="red">This <br/>one <br/>should fill <br/>all remaining space,<br/> even when yellow resizes</div>
</div>
Here is also some usefull ressource on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/