作者:潮流时候男装 | 来源:互联网 | 2023-05-23 14:54
如果客户想要一个像素完美的设计,或者在这种情况下,"完美百分比"就像这个例子那样会发生什么?
完整容器的高度为100%,因此所有div和空格的总和将产生100%的高度.
这里的问题是我试图在div中使用margin-bottom添加空格,但是意识到边距百分比不代表100%高度的完整容器内的期望值.
我所知道的唯一解决方案是使用%高度而不是边距的div.但我想做一个更干净的HTML.还有另一种选择吗?
附加信息:我使用的是phonegap + ionic,是一款移动设计.
1> Gildas.Tambo..:
首先,您必须将根元素设置为 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
}