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

Question

Here is my fiddle:

<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 !)

[Duplicate Question](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Oliver Orchard, Feb 17 '17 at 14:25
or also of this one http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 — G-Cyrillus, Feb 17 '17 at 14:31

G-Cyrillus · Answer 1 · 2017-02-17T14:32:34.997

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/

score 0 · Answer 2 · answered Feb 17 '17 at 14:27

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>

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

2 Answers2