Question

好的，所以我试图让一个元素成为页面的全高。我的HTML元素相匹配的页面大小，甚至当我调整或开拓检查元素框，关闭它，但我的身体和其他元素不会，所以不是我使用JavaScript，使我的元素的HTML框的大小，哪个有效，但是当您调整浏览器窗口大小或关闭/打开开发人员工具时，html元素会调整大小，但其他元素不会。

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

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

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

添加.resize（）插件后，其中一个答案显示我能够让它几乎正常工作。打开和关闭开发人员工具时，它可以工作，但调整窗口大小并没有改变任何东西。我想因为我匹配html元素的大小，html元素会增长，但要匹配我正在调整大小的对象的大小，这意味着它只会变得更大而且不会更小。

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

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

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

Answer 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>

Answer 2

有一个插件可以添加元素大小调整的侦听器，您可以使用它来执行此操作。查看here.

或者，.resize()适用于窗口。

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

2 个答案: