如何使用 JQuery 调整父容器的高度（比如 DIV）答案

【问题标题】：How to resize height of parent container (say DIV) using JQuery如何使用 JQuery 调整父容器的高度（比如 DIV）
【发布时间】：2009-11-05 16:31:19
【问题描述】：

我正在努力实现以下目标（我是 JQuery 的新手）。

我希望有一个父容器（例如 DIV）在其任何（或所有）子控件调整大小时自动增加其高度。 DIV 可能包含内联和绝对定位的元素（甚至是相对的）。

换句话说，容器应该随时自动扩展其高度以包含其所有子级。

我对 CSS hack（以及“clearfix”）感到沮丧，并想使用 JQuery（看起来比 CSS 更有前途）。

如何使用 JQuery 实现这一点。

【问题讨论】：

标签： jquery

【解决方案1】：

您始终可以使用 ready 函数通过使用“css”高度来更改 div 的高度。像这样的：

             $(document).ready(function() {
             var $optionDiv = $('#optiondiv');
             var $subtable = $('#subtable');
              $subtable.css('height', $optionDiv.height());
            Page.init();
        });

上例中的subtable在页面上渲染后取optiondiv的高度。

Page.init() 方法使用之前使用我们的函数更改的值再次呈现页面。可以这样想，您使用 ready 函数调用您的方法来确定要检查的元素的确切尺寸，更改值，然后再次渲染 div。

【讨论】：

Saket，非常感谢。我是 JQuery 的新手。只是一个快速的问题。上面sn-p中的Page.init()有什么用？它会重新加载整个页面还是？我对此有点困惑。无论如何，再次感谢。

【解决方案2】：

这是一个奇怪的问题，因为您问的是一件事，但您提到的次要解决方案表明您实际上是在尝试解决另一个问题。

父 div 应该自然扩展以适应其包含的元素，如果不是，通常表明其他地方出了问题 - 在你的情况下，当你提到“clearfix”时，它表明你正在使用floats在父级内部，它不再延伸到其子级之外。

这听起来对吗？如果是这样，那么您可能会发现溢出方法比尝试使用 jquery 执行此类操作更有用。

请看这里：clearing floats with overflow

【讨论】：