與百分比的css位置

Question

我有位置div相對於另一個div的問題。

我想做一個位於屏幕水平中間位置的div，並且在這個div中我想放置3個具有相同高度的其他div。但他們都應該有迴應。

一張圖片比文字:)

<div id="zwrapper"> 
<div id="z1" class="row"></div> 
<div id="z2" class="row"></div> 
<div id="z3" class="row"></div> 
</div> 

藍光元素更是HTML

html{ 
    background: steelblue; 
    height: 100%; 
    width: 100%; 
    top:0; left:0; bottom: 0; right:0; 
} 

石灰一個IST該div (#zwrapper)在這裏我要添加三個紅色的div。

#zwrapper{ 
    height: 81%; 
    top: 10%; 
    width: 100%; 
    left: 0; 
    position: absolute; 
    background: lime; 
} 

紅色的divs會產生問題。所有div的高度爲30％。第一個應該對齊頂部和第三個底部。編號爲#z2的中間格是唯一獲得5%的保證金的格。

.row{ 
    position: relative; 
    width: 80%; 
    background: red; 
    height: 30%; 
} 
#z2{ 
    margin: 5% 0; 
} 

我的想法是把3周的div的30％的高度到包裝，給中間的一個保證金的5％（上/下），所以我得到100％的高度。 但這不起作用。

如果我調整窗口的寬度，紅色div的高度會改變，但我不會改變高度。

我做了一個小提琴來演示這個。 http://jsfiddle.net/ELPJM/

預先感謝

Answer 1

的問題是，在margin百分比值總是相對於寬度，而不是高度。您可以通過使用絕對定位來實現此目的，並在每行上設置「頂部」值。就像這樣：

.row { 
    position: absolute; 
    width: 80%; 
    background: red; 
    height: 30%; 
} 

#z1 { 
    top: 0%; 
} 

#z2 { 
    top: 35%; 
} 

#z3 { 
    top: 70%; 
} 

http://jsfiddle.net/ELPJM/8/

Answer 2

這應該解決它

.row{ 
    position: relative; 
    width: 80%; 
    margin:0 auto; 
    background: red; 
    height: 30%; 
} 
#z2{ 
    margin: 5% auto; 
} 

Answer 3

HTML

<div id="zwrapper"> 
    <div class="holder"> 
     <div id="z1" class="row"></div> 
     <div id="z2" class="row"></div> 
     <div id="z3" class="row"></div> 
    </div> 
</div> 

CSS

html,body{height: 100%;} 
#zwrapper{min-height: 100%;} 
#zwrapper:after{ 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    width: 1px; 
} 
#zwrapper.holder{ 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 4

這是你的margin: 5% 0;，使高度變化。我不確定margin-top和-bottom是從哪裏來衡量它的百分比，但它與父元素高度不一樣。 因此你不能用它來計算100％的身高。

試試這個：

<div id="zwrapper"> 
    <div id="z1" class="row"></div> 
    <div class="spacing"></div> 
    <div id="z2" class="row"></div> 
    <div class="spacing"></div> 
    <div id="z3" class="row"></div> 
</div> 

與造型：

.spacing{ height: 5%; }