我有一个主要的div位置绝对值,top:0,bottom:0 width:500px;还有4个divs。见所附图片。如果我调整窗口高度,我希望Main div的内部框响应。 1,2和3具有固定的高度100px,第4个框响应。
最佳答案
(感谢nashcheez创建代码)我建议使用flex:
.parent {
top: 0;
bottom: 0;
width: 500px;
height: 100%;
background-color: red;
display: flex;
flex-direction: column;
position: absolute;
display: -webkit-flex;
}
.child {
width: 100%;
height: 100px;
}
.last{
background-color: green;
flex-grow: 1;
}
<div class="parent">
<div style="background-color: yellow;" class="child">
</div>
<div style="background-color: blue;" class="child">
</div>
<div style="background-color: purple;" class="child">
</div>
<div style="background-color: green;" class="last">
</div>
</div>