Question

这是我的小提琴：

<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

你可以使用flex进行这种布局：

＆＃13;

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

＆＃13;

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

＆＃13;

为了让包装器增长，min-height也可以用来

＆＃13;

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

＆＃13;

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

＆＃13;

这里还有一些关于flex的有用资源：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>

DIv填充垂直空间，即使div高于动态高度？

2 个答案: