我有一个主要的div位置绝对值,top:0,bottom:0 width:500px;还有4个divs。见所附图片。如果我调整窗口高度,我希望Main div的内部框响应。 1,2和3具有固定的高度100px,第4个框响应。

html - 如何在不同高度的div中垂直放置4个盒子?-LMLPHP

最佳答案

(感谢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>

10-07 19:16
查看更多