如何在不同高度的div中垂直放置4个盒子？

I have a Main div position absolute, top:0, bottom:0 width:500px; and 4 divs in it . See attached image. I want the Main div's inside boxes responsive if i adjust window height. 1,2, and 3 has fixed height 100px and 4th box is responsive.

我有一个绝对的主div位置，顶部：0，底部：0宽度：500px;和4个div。见附图。如果我调整窗口高度，我希望主div的内部框响应。 1,2和3具有固定高度100px和第4个盒子是响应的。

3 个解决方案

#1

(Thanks to nashcheez to create codes)I suggest to using flex:

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

#2

You should give your height in percentage for the desired effect.

你应该以百分比给出你想要的效果。

Refer to the following fiddle and check on resize: https://jsfiddle.net/cn5bd6qq/

请参阅以下小提琴并检查调整大小：https：//jsfiddle.net/cn5bd6qq/

Attached code:

附加代码：

.parent {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 100%;
  background-color: red;
}
.child {
  height: 25%;
  width: 100%;
}

<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="child">

  </div>
</div>

#3

User percentage for height to the 4th div.

高度与第4个div的用户百分比。

#1