在不同分辨率上使用高度百分比

时间:2017-03-23 21:15:18

标签: html css

使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。在1024x768margin-top看起来更好。为什么它不成比例?那种问题的设计模式又是什么? 我真的在寻找一个通用的(至多是至少部分)解决方案。

感谢您的帮助。

添加小提琴。 Fiddle

1 个答案:

答案 0 :(得分:1)

  

在1920x1080分辨率下,cont2有更高的高度,因此其内容更接近cont1。而在1024x768上,margin-top看起来更好。为什么它不成比例?

它可能看起来不同,因为两种分辨率都有不同的宽高比,因为1920/1080 = 1.77777777777777771024/768 = 1.3333333333333333。虽然20px margin-top在两者中看起来都相同。

  

这种问题的设计模式是什么?我真的在寻找一个通用的(至多是至少部分)解决方案。

genric解决方案

.cont1 > div {
  height: calc(100% - 20px);
}

由于不同屏幕高度的9%的像素不同,因此是1080px的9%&gt; 768px的9%。它在.cont1内的更好的div总是与屏幕尺寸上的容器相同。

希望这会有所帮助。干杯!!