使用 jquery 的 DIV 的 100% 高度 - 如何使其与父级相关答案

【问题标题】：100% height for DIV using jquery - how to make it relate to parent使用 jquery 的 DIV 的 100% 高度 - 如何使其与父级相关
【发布时间】：2012-04-26 01:40:04
【问题描述】：

我正在使用这个 jquery 脚本来扩展子 DIV 100%。它工作正常，但 DIV 超出了浏览器窗口，所以我必须始终向下滚动。是否可以将 100% 高度更改为与父 DIV 而不是文档相关？

$(document).ready(function () {
    $("#stretch").animate({ height: $(document).height() }, 500 );
});

【问题讨论】：

标签： jquery height

【解决方案1】：

没错：

对于直接父母：

$(document).ready(function () {
    var $stretch = $("#stretch");

    $stretch.animate({ height: $stretch.parent().height() }, 500 );
});

http://jsfiddle.net/RRqr4/

如果不是直接父母，您可以将closest 替换为parent。

【讨论】：

也许您可以详细说明“no bueno”？这确实有效jsfiddle.net/RRqr4 如果它对您不起作用，那么还有其他事情发生。
我的父母是：#body_wrap {width:100%;min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -145px;} #frame_body {width :771px;边距: 0 自动;}
我用我的代码更新了它，但我无法找出错误：jsfiddle.net/RRqr4/1
你的元素没有高度，所以父元素高度为 0。jsfiddle.net/RRqr4/3
好吧，这是有道理的。我正在使用粘性页脚，所以我希望页脚始终随窗口向上移动。

【解决方案2】：

试试

$(document).ready(function () {
    var $stretch = $("#stretch");
    $('#stretch').animate({ height: $stretch.parent().height() }, 500 );
});

或者如果它不是即时父母：

$(document).ready(function () {
    var $stretch = $("#stretch");
    $('#stretch').animate({ height: $stretch.closest('parent-selector').height() }, 500 );
});

【讨论】：

丢失了 DIV - 不出现。
这实际上是行不通的，因为this 在这种情况下不是元素。
请找到一个pastebin站点并粘贴html
问题是你没有在父节点上设置高度！做#frame_body {width:771px;margin: 0 auto; height:500px;} 然后试试