Question

我的页面上有一个侧边栏，我希望始终是容器大小的100％。遗憾的是，由于动态内容，页面的高度可变，我无法通过CSS单独告诉元素这样做。

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

我发现了一些jQuery插件可以做我想要的，但觉得它们过于复杂（我似乎无法让它们工作！）。

Answer 1

假设您的容器的ID是“容器”并且侧边栏的ID是“侧边栏”，您可以尝试以下操作（未经测试！）

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

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

Answer 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()等

时调用它

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

2 个答案: