javascript - 相对于窗口高度操纵 div 高度

Question

我有几个 div，即

<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>

获取窗口高度后

windowHeight = window.innerHeight;

我想将 div 高度控制为窗口高度的比例，例如 div_1 应该是窗口高度的 30%，div_2 应该是窗口高度的 45% 等。我需要在 javascript/jquery 中执行此操作。

Answer 1

你可以简单地使用CSS

.div_1 {height:30vh;}

这会将高度设置为视口(viewport)高度的 30%。 vh是视口(viewport)的高度。

IE > 8 部分支持，Opera 不支持，其他版本完全支持。 http://caniuse.com/#feat=viewport-units

在 jQuery 中实现

$('.div_1').css("height", $(document).height()*30/100+"px"); // Will set its height equal to 30% of that of document.