使用jquery使孩子div占祖父母身高的百分比[关闭]答案

【问题标题】：Making a child div a percentage in height of a grandparent using jquery [closed]使用jquery使孩子div占祖父母身高的百分比[关闭]
【发布时间】：2013-09-27 02:28:11
【问题描述】：

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

grandparent
   parent
       child

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

【问题讨论】：

标签： jquery grandchild

【解决方案1】：

Erik，你说的不是很具体。

例如，如果 'parent' 是 'grandparent' 的固定百分比高度，那么在 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/）

【讨论】：

嘿，非常感谢。我正在使用 $(".menu_container").css('height', $('.window').height()-200);这是-200px，但我无法得到它的百分比基数。我知道我之前没有提供信息，但是代码还有一件事。是不是我祖父的 div 是 100% 的高度和宽度，所以它是全屏的。因此，随着视口的变化，div 也会发生变化。我希望有一个百分比基数的jquery会响应视口的变化，但由于某种原因它没有。有什么建议？基本上我需要子 div 响应视口的变化。
如果您的目的是将孩子的高度设置为视口的百分比并且您喜欢使用 javascript（或 JQuery），那么不要担心祖父母的尺寸，直接设置孩子的高度.因此，从跨浏览器问题中抽象出来，viewportH = $(window).height(); 并设置$('#child').height( 0.25 * viewportH ); 如果您担心跨浏览器兼容性，请查看我发布的边缘链接，它将为您解决问题。

【解决方案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});

【讨论】：