-2

好的，所以我试图让一个元素成为页面的完整高度。即使我调整或打开检查元素框并关闭它，我的 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 来减去我的标题的高度。

4

2 回答 2

3

你根本不需要 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 示例。

如果您的分隔线的父级的值不是 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>
于 2013-03-15T13:51:07.297 回答
2

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

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

于 2013-03-15T13:51:28.440 回答