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

概述如果客户想要一个像素完美的设计,或者在这种情况下,“完美百分比”就像这个例子那样会发生什么？ 完整容器的高度为100％,因此所有div和空格的总和将产生100％的高度. 这里的问题是我试图在div中使用margin-bottom添加空格,但是意识到边距百分比不代表100％高度的完整容器内的期望值. 我所知道的唯一解决方案是使用％高度而不是边距的div.但我想做一个更干净的HTML.还有另一种选择吗 如果客户想要一个像素完美的设计,或者在这种情况下,“完美百分比”就像这个例子那样会发生什么？

完整容器的高度为100％,因此所有div和空格的总和将产生100％的高度.

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

我所知道的唯一解决方案是使用％高度而不是边距的div.但我想做一个更干净的HTML.还有另一种选择吗？

附加信息：我使用的是phonegap ionic,是一款移动设计.

解决方法 首先,您必须将根元素设置为高度：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>

总结

以上是内存溢出为你收集整理的html – 如何在CSS中添加高度百分比的上/下边距全部内容，希望文章能够帮你解决html – 如何在CSS中添加高度百分比的上/下边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。