调整大小时匹配另一个元素的高度答案

【问题标题】：Match height of another element on resize调整大小时匹配另一个元素的高度
【发布时间】：2013-03-04 06:27:20
【问题描述】：

好的，所以我试图让一个元素成为页面的完整高度。即使我调整或打开检查元素框并关闭它，我的 html 元素也匹配页面大小，但我的正文和其他元素不会，所以我使用 javascript 使我的元素与 html 框的大小一致，这可行，但是当您调整浏览器窗口的大小或关闭/打开开发人员工具时，html 元素会调整大小，但其他元素不会。

有没有办法在我的 html 元素上添加一个监听器，以便在它改变高度时运行一个函数？

这是我尝试使用某人建议但不起作用的一些代码：

$('#program-cell').height($('html').height());
$('html').resize(function () {
    $('#program-cell').height($('html').height());
});

添加 .resize() 插件后，其中一个答案表明我几乎可以让它工作。打开和关闭开发人员工具时它可以工作，但调整窗口大小并没有改变任何东西。我猜是因为我匹配了 html 元素的大小，但 html 元素会增长以匹配我正在调整大小的对象的大小，这意味着它只会变大而不会变小。

我必须清除我正在调整大小的对象的高度，方法是将其高度设置为自动，然后匹配 html 的高度。我终于让它工作了，这是工作的代码：

$('#program-cell').height(($('html').height()-84)+'px');
$('html').resize(function () {
    $('#program-cell').height('auto');
    $('#program-cell').height(($('html').height()-84)+'px');
});

我有 -84 来减去我的标题的高度。

【问题讨论】：

请提供一些代码......
.resize().
我尝试了 .resize 但也许它只适用于窗口？不是元素？
我不太确定你在问什么。是页面滚动的问题吗？你想让所有东西的高度都限制在窗口内吗？
我想知道是否有某种方法可以在我的 html 元素上添加一个监听器，以便在它改变高度时运行一个函数。有一个插件，其中一个答案链接到。

标签： javascript jquery html css height

【解决方案1】：

你根本不需要 JavaScript。

html, body { height:100%; }
div { height:100%; }

<html> <!-- 100% of window height -->
    <body> <!-- 100% of html height -->
        <div></div> <!-- 100% of body height -->
    </body>
</html>

JSFiddle example.

如果您的分隔线的父级的值不是 100% 高度，则您的分隔线相对于页面正文的高度不会是 100%。

<html> <!-- 100% of window height -->
    <body> <!-- 100% of html height -->
        <div style="height:30px"> <!-- 30px high parent -->
            <div></div> <!-- 100% of parent height = 30px -->
        </div>
    </body>
</html>

【讨论】：

我已经尝试过这种方式，但是我的 div 非常嵌套，并且 body 没有改变它的高度，挖掘它需要太长时间，而且我已经到了最后期限。
我已经举了一个例子来证明这是可行的。因为你不准备花一些时间来解决你的问题，所以对我的回答投了反对票，这也是一件很蹩脚的事情。您的 100% 高度的嵌套分隔线将具有其父级的 100% 高度。例如，如果您的 100% 高度分隔线的父级只有 30 像素高度，那么您的 100% 高度分隔线将只有 30 像素高。
投反对票？我没有对任何事情投反对票...我是在这里提出问题的人，我对任何潜在的解决方案都充满了兴趣！
我了解嵌套如何在 100% 高度下工作，这就是为什么我不想这样做，因为我必须将 100% 添加到它嵌套的每个元素中，就像我说的那样，它非常嵌套。同样，我什至无法让它嵌套的第一个元素起作用，所以使用 javascript 并强制它似乎要简单得多。
不用担心。很抱歉指责你投了反对票。

【解决方案2】：

有一个插件可以为元素调整大小添加监听器，您可以使用它来做到这一点。看看here.

或者，.resize() 在窗口上工作。

【讨论】：

不错的插件。它不负责调整窗口大小，但负责打开和关闭开发人员工具框。
你能用它在你的父元素上调用.resize()，然后将你的javascript/jQuery放在一个调整大小的函数中吗？类似(changing_div).resize(function_to_do_some_resizing)
好的，我用它来工作了。问题是 html 的高度被我正在编辑的对象的高度改变了，所以我不得不再次使它变小以获得 html 的高度。很难解释，我会在我的问题中发布我的代码。