带百分比的 CSS 位置

我在另一个 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%。第一个应与顶部对齐，第三个应与底部对齐。中间的div带有id#z2是唯一一个获得边际的5%.

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

我的想法是将 3 个高度为 30% 的 div 放入包装器中，并为中间的 div 提供 5% 的边距（顶部/底部），这样我就得到 100% 的高度。 但这是行不通的。

如果我调整窗口的宽度，红色 div 的高度会改变，尽管我不改变高度。

我做了一个小提琴来证明这一点。http://jsfiddle.net/ELPJM/ http://jsfiddle.net/ELPJM/

提前致谢

问题是百分比值margin总是相对于宽度，而不是高度。您可以通过使用绝对定位并在每行上设置“顶部”值来实现此目的。像这样：

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

#z1 {
    top: 0%;
}

#z2 {
    top: 35%;
}

#z3 {
    top: 70%;
}

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