css - 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;
}

(#zwrapper)我想在其中添加三个红色 div的石灰一个是那个 div 。

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

红色的 div 会产生问题。所有 div 的高度均为 30%。第一个应与顶部对齐，第三个应与底部对齐。具有 id 的中间 div#z2是唯一获得5%.

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

我的想法是将高度为 30% 的 3 个 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;
}