视口更改时垂直分布对象

Question

我现在一直坐在这个问题上大约4小时。我想，这要长久。所以我在这里：

一旦视口超过特定高度，我想垂直分配div容器。这是一个sketch of an example。

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）我尝试了所有不同类型的解决方案。 This (jsfiddle)是唯一接近它的人。

我所做的基本上是添加五个类，其中三个height:10%;，其中两个包含我的容器height:35%; 一个容器height:100%;

包围的所有东西

正如您所看到的，每次容器展开（我的示例尺寸）超过500px时，中心会扩展两次。

我怎么能解决这个问题？

Answer 1

我假设您想要做一些响应式设计。 那么使用bootstrap呢？

它有一个非常灵活的Grid系统，它可以在大多数设备上开箱即用。