与百分比的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%; }