當視口發生變化時垂直分配對象

我一直坐在這個問題上約4小時。我猜想的方式。所以我在這裏：當視口發生變化時垂直分配對象

我想在視口超過特定高度時垂直分配div容器。這是一個sketch of an example。

enter image description here

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中心擴展兩次。

我怎麼能解決這個問題？

來源

2013-09-26 user1308534

你在尋找什麼樣的瀏覽器支持？有很多方法可以做到這一點。如果需要使用一些JavaScript或jQuery怎麼樣？ –

如果[瀏覽器支持]（http://caniuse.com/flexbox）可以接受，那麼使用Flexbox時，這應該很容易。否則，我可能會使用JavaScript。 – thirtydot

對不起人們我不能使用像jQuery這樣的框架，因爲我正在研究低層設備和性能關鍵環境。我們已經爲每個特定案例實施了自己的框架： -/ – user1308534

我假設你想做一些響應式設計。那麼使用bootstrap呢？

它有一個非常靈活的Grid系統，它可以在大多數設備上開箱即用。

來源

2013-09-26 15:50:39 smartmeta

Bootstrap的網格系統並沒有真正幫助解決這個問題。 – thirtydot

當視口發生變化時垂直分配對象

回答

相關問題