我一直在这个问题上坐了大约 4 小时。我想的方式很长。所以我在这里：
一旦视口超过特定高度，我想垂直分布 div 容器。这是一个示例的草图。
HTML：
<div class="bubu">
<div class="center1"></div>
<div class="center2">
<div class="element"></div>
</div>
<div class="center3"></div>
<div class="center4">
<div class="element"></div>
</div>
<div class="center5"></div>
</div>
CSS：
* {
margin:0;
padding:0
}
body {
margin:0;
text-align:center;
background: no-repeat fixed center center #030303;
allowtransparency:true
}
.bubu {
background-color:#eee;
position: absolute;
height: 100%;
width:500px;
left: 50%;
margin-left: -275px;
/* width / 2 */
}
.center1 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center2 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center3 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center4 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center5 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.element {
background-color:#123456;
position: absolute;
height: 250px;
width:500px;
top:50%;
margin-top: -125px;
/* width / 2 */
}
自保证金：自动 0; 不会完成这项工作（将转换为 0 高度）我尝试了所有不同类型的解决方案。这个（jsfiddle）是唯一接近它的。
我所做的基本上是添加五个类，其中三个，其中height:10%;两个包含我的容器height:35%;
所有东西都被一个容器包围height:100%;
如您所见，每次容器扩展（我的示例大小）关闭 500 像素时，中心扩展两次。
我到底该如何解决这个问题？