使div在不同的屏幕分辨率下采用相同的比例高度背后的理论是什么?例如,以下代码:
<div id="cont1" class="container-fluid">
<div style="height:91%;overflow-y:auto;">
</div>
</div>
<div id="cont2" class="container-fluid" style="margin-top:20px;padding:0px;">
<div>
</div>
</div>
在1920x1080
cont2
的分辨率有更高的高度,因此其内容更接近cont1
。在1024x768
上margin-top
看起来更好。为什么它不成比例?那种问题的设计模式又是什么?
我真的在寻找一个通用的(至多是至少部分)解决方案。
感谢您的帮助。
添加小提琴。 Fiddle
答案 0 :(得分:1)
在1920x1080分辨率下,cont2有更高的高度,因此其内容更接近cont1。而在1024x768上,margin-top看起来更好。为什么它不成比例?
它可能看起来不同,因为两种分辨率都有不同的宽高比,因为1920/1080 = 1.7777777777777777
和1024/768 = 1.3333333333333333
。虽然20px
margin-top在两者中看起来都相同。
这种问题的设计模式是什么?我真的在寻找一个通用的(至多是至少部分)解决方案。
genric解决方案
.cont1 > div {
height: calc(100% - 20px);
}
由于不同屏幕高度的9%
的像素不同,因此是1080px的9%&gt; 768px的9%。它在.cont1
内的更好的div总是与屏幕尺寸上的容器相同。
希望这会有所帮助。干杯!!