如何在 CSS 中添加高度百分比 top/bottom 边距

Question

如果客户想要像素完美的设计，或者在这种情况下 "percent perfect" 像这个例子会怎样？

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

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

我知道的唯一解决方案是使用 % 高度而不是边距的 div。但是我想做一个更干净的html。还有其他选择吗？

附加信息：我正在使用 phonegap + ionic，是一种移动设计。

Answer 1

你可以使用

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

这使得高和宽包含任意padding/borders，看看http://css-tricks.com/box-sizing/

Answer 2

首先，您必须将根元素设置为 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 3

我被推荐给 post 我的 fiddle 作为答案。所以这里是纲要：OP 运行的问题是保证金被计算为 percent of the width (See "<percentage>") when you use percents. That means that margin-bottom: 50% is 50% of the width of the container, not the height. One way around this is to use vh (viewport height) unit of measure. This is of course limited to a percent of the viewport and not a container, but as long as your design is essentially full screen with no scrolling, it's a possible solution (credit to the user 首先提出它）。

兼容性也是一个问题（尤其是 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;
}

和演示 link：http://jsfiddle.net/c28h58cw/

Answer 4

你为什么不用常识性的算法和绝对定位呢？您不需要那样检查浏览器支持。

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

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

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

如何在 CSS 中添加高度百分比 top/bottom 边距

How to add percentage-of-height top/bottom margin in CSS

html

css

ionic-framework