Question

我想使用jquery将子div的高度设为祖父母的百分比。

grandparent
   parent
       child

我希望孩子的祖父母身高是一个百分比，所以它对视口有反应。

Answer 1

埃里克，你还不是很具体。

例如，如果'parent'是'grandparent'的固定百分比高度，那么在CSS中设置child的百分比高度是简单的数学，不需要JS。

否则，使用jQuery，如果你想让孩子的祖父母高度为25％：

var grandparent_height = $('#grandparent').height();
$('#child').height( grandparent_height * 0.25 );

你的问题还有更多吗？

如果您希望设置相对于视口的子大小，并且您只使用现代浏览器，那么您可以使用CSS vh单位（1vh是视口高度的1％），并设置

#child {
    height: 25vh;
}

测量视口大小时，不同的浏览器可能会返回不同的结果。这是一个关于不同浏览器处理的好资源（和javascript库）：http://verge.airve.com/）

Answer 2

如果这是您的代码：

<div>
  <div>
    <div class="child">
    </div>
  </div>
</div>

你可以做类似的事情：

var percentValue; // Set your percent here
var grandparentHeight = $('.child').parent().parent().height();
$('.child').css({'height' : grandparentHeight * percentValue});

使用jquery让孩子在祖父母的高度上划分一个百分比

2 个答案: