html - 在不同分辨率下使用高度百分比

Question

让 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 。 Fiddle

Answer 1

On a resolution of 1920x1080 cont2 has more height and as a result its content is closer to the cont1. While on 1024x768 that margin-top looks better. Why it's not proportionally the same?

它看起来可能不同，因为两种分辨率的纵横比不同 因为 1920/1080 = 1.7777777777777777 和 1024/768 = 1.3333333333333333。尽管 20px margin-top 在两者中看起来是一样的。

Also what is a design pattern for that kind of problem? I am really looking for a generic (at most part at least) solution.

通用解决方案是

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

因为 9% 不同屏幕高度的像素不同，即 1080 像素的 9% > 768 像素的 9%。它在 .cont1 中更好的 div 在屏幕尺寸上总是比它的容器短相同的像素。

希望这对您有所帮助。干杯!