如何在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>