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>

blu元素是HTML

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

石灰一点是div (#zwrapper)我要添加三个红色div。

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

红色的div会产生问题。所有div都有30％的高度。第一个应该对齐顶部，第三个对齐到底部。 ID为#z2的中间div是唯一一个获得5%边距的div。

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

我的想法是将3个高度为30％的div放入包装中，并给中间一个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

这是你的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%; }

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

这应该解决它

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