jquery - 使用jquery使孩子div占祖父母身高的百分比

Question

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

grandparent
   parent
       child

我希望孩子的身高是其祖父母的百分比，因此它可以响应视口。

Answer 1

如果这是您的代码：

<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});

Answer 2

埃里克，你没有很具体。

例如，如果“父母”是“祖父母”的固定百分比高度，那么在 CSS 中设置孩子的高度百分比很简单，不需要 JS。

否则，如果您希望孩子是祖父母的 25% 高度，则使用 jQuery：

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

你的问题还不止这些吗？

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

#child {
    height: 25vh;
}

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