如何在CSS中添加高度百分比的上/下边距

Question

如果客户想要一个像素完美的设计，或者在这种情况下，“完美百分比”就像这个例子那样会发生什么？

完整容器的高度为100％，因此所有div和空格的总和会产生100％的高度。

这里的问题是我试图在div中使用margin-bottom添加空格，但意识到边距百分比并不代表100％高度的整个容器内的期望值。

我所知道的唯一解决方案是使用％高度而不是边距的div。但我想做一个更干净的HTML。还有其他替代方案吗？

其他信息：我使用的是phonegap + ionic，是一种移动设计。

Answer 1

首先，您必须将根元素设置为height:100vh

然后使用:nth-child设置每个div的高度和边距

*{box-sizing: border-box}
:root{width: 100vw; height: 100vh; text-align: center}
body{padding: 0; margin:0}
div{
  display: block;
  background: #333;
  width: 480px;
}

div:first-child, div:nth-child(2){
  height: 15vh;
  margin: 0 0 2.5vh 0
}

div:nth-child(3){
  height: 20vh;
  margin: 0 0 5vh 0
}

div:nth-child(4){
  height: 30vh
}

<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

我被建议发布我的小提琴作为答案。所以这里是纲要：OP遇到的问题是当您使用百分比时，保证金计算为percent of the width (See "<percentage>")。这意味着margin-bottom: 50%是容器宽度的50％，而不是高度。解决此问题的一种方法是使用vh（视口高度）度量单位。这当然仅限于视口的百分比而不是容器，但只要您的设计基本上是全屏而没有滚动，它就是一种可能的解决方案（归功于用户@Tambo即将推出先用它来。）

兼容性也是一个问题（特别是针对IE）：http://caniuse.com/#feat=viewport-units

以下是解决方案的重要部分

.small {
    height: 15%;
    margin-bottom:2.5vh;
}

.medium {
    height: 20%;
    margin-bottom:5vh;
}

.large {
    height: 30%;
    margin-bottom:10vh;
}

演示链接：http://jsfiddle.net/c28h58cw/

Answer 3

为什么不使用常识算法和绝对定位？您不需要以这种方式检查浏览器支持。

＆＃13;

＆＃13;

div {
  background-color: #888;
  position: absolute;
  left: 0;
  width: 100%;
}
div:nth-child(1) {
  top: 0;
  height: 15%;
}
div:nth-child(2) {
  top: 17.5%;
  height: 15%;
}
div:nth-child(3) {
  top: 35%;
  height: 20%;
}
div:nth-child(4) {
  top: 60%;
  height: 30%;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

请注意，百分比顶部和底部边距是相对于父元素的宽度，而不是高度。只是另一个CSS WTF。

Answer 4

你可以使用

   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

使高度和宽度包含任何填充/边框，看看http://css-tricks.com/box-sizing/