添加顶部填充根据视图端口高度动态添加

Question

我正在尝试根据视图端口高度动态设置填充到＆＃34; child＆＃34; div使得top-padding是视口高度的5％。

<div id="about-us">Some content
 <div class="child">Other content</div>
</div>

Fiddle

Answer 1

您可以使用基于视口高度的单位vh：info

.child {
  padding-top: 5vh;
}

Answer 2

试试这个：

obj.start()

$(document).ready(function() { $('#about-us .child').css('padding-top', $(window).height() * 0.05); }); 将获得视口的高度并将其乘以0.05将获得其5％