使用 jQuery 镜像动态元素的高度答案

【问题标题】：Use jQuery to mirror height of a dynamic element使用 jQuery 镜像动态元素的高度
【发布时间】：2009-10-09 04:54:55
【问题描述】：

我的页面上有一个侧边栏，我希望始终保持 100% 的容器大小。遗憾的是，我无法单独通过 CSS 告诉元素执行此操作，因为页面由于动态内容而具有可变高度。

是否可以使用 jQuery 查找内容容器的高度，并调整侧边栏高度以匹配它？

我发现一些 jQuery 插件可以满足我的需求，但感觉它们过于复杂（而且我似乎无法让它们工作！）。

【问题讨论】：

尝试将内容和高度放在一个分区中，高度都设置为 100%，然后将 css 放在页面底部...
@halocursed 为什么在页面底部使用 CSS？

标签： javascript jquery

【解决方案1】：

假设您的容器 id 是“container”，而侧边栏的 id 是“sidebar”，您可以尝试以下方法（未经测试！）

$(document).ready(function() {
    $('#sidebar').height($('#container').height());
});

这应该（在加载文档时）将侧边栏高度调整为与容器高度相同。

【讨论】：

请注意，如果您有任何调整页面大小的内容（可能使用slideDown），您将需要再次调用此代码。

【解决方案2】：

我会继续Damovisa's answer.

$(document).resize(function(){
     $('#sidebar').height($('#container').height());
});

但是，如果您大量调整页面大小，这可能会引发很多问题。你可以试试这个

  $(document).resize(function(){         
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            $('#sidebar').height($('#container').height());
        }, 100);
    });

在第二个例子中，它只会在调整大小 100 微秒后调整大小。

这也是假设$(document).resize()会在页面大小改变时被触发。您总是可以将它包装在一个函数中，并在任何 slideDown() 等完成时调用它

【讨论】：

很好的解决方案。我想理想的解决方案真的取决于什么可以改变容器的大小。
不听文档调整大小，为什么不绑定到窗口调整大小？