DIv填充剩余的垂直空间，即使div上面有动态高度？

Question

这里是我的小提琴：

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; 
} 

这工作好当黄色条具有静态的高度，这是不是在我的情况下工作。

（不使用JS拜托了！）

Answer 1

你可以使用柔性的这种布局：

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>

为了让包装成长，然后最小高度可以来还用途

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>

这里也是在柔性一些有用的ressource：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以使用flexbox与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>