带百分比的 css 位置

Question

我对另一个 div 中的相对位置 div 有疑问。

我想制作一个位于屏幕水平中间的 div，在这个 div 中我想放置 3 个具有相同高度的其他 div。但他们都应该做出回应。

图片胜于 Eloquent :)

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

我的想法是将高度为 30% 的 3 个 div 放入包装器中，并给中间的一个留出 5% 的边距(顶部/底部)，这样我就得到了 100% 的高度。但这不起作用。

如果我调整窗口的宽度，红色 div 的高度会改变，但我没有改变高度。

我制作了一个 fiddle 来演示这一点。 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/