Question

document.body.height = document.getElementById("page-main").clientHeight + 400;

#page-main {
    position:absolute;
    width:100%;
    height:2000px;
    z-index:2;
    background:#eeeeee;
}

#footer {
    position:fixed;
    width:100%:
    bottom:0px;
    height:400px;
    z-index:1;
    background:#aaaaaa;
}

<body>

<div id='page-main'>main</div>

<div id='footer'>footer</div>

</body>

我有一个带有position: fixed; bottom: 0px;的页脚div和一个带有position: absolute;的主内容div。

基本上，我们的想法是让主要内容div在文档的静态背景之上像一张纸一样，因此您可以滚动浏览页面的内容，当您到达底部时，您需要能够滚动几百个像素以显示主要内容div下方的页脚div。

我在我的着陆页中允许这样做，通过查找底部的额外空间所需的身体高度，并在身体上使用height: 1720px;设置高度。但是，我想以一种不需要保持不变的方式来实现它，因为我担心浏览器和设备可能对主内容div有不同的渲染高度，我想在多个页面上使用它而不需要单独硬编码身高。

我尝试使用JavaScript来查找主内容div的高度（使用clientHeight，这看起来效果很好）并为身高增加了几百个像素，如下所示：

document.body.height = document.getElementById("page-main").clientHeight + 400;

并尝试更改以下内容：

document.body.style.height
document.body.style.paddingBottom

这根本不会改变身体的高度。我尝试使用类似的方法将身体的背景改为红色，这有效，但出于某种原因，它只是拒绝改变高度。我已经尝试将这个脚本放在头部，身体上方和身体末端。没有帮助。找到主内容div的clientHeight工作正常，添加400到这个数字似乎很容易，我知道文档肯定有一个正文，所以我很困惑为什么它可能是JavaScript拒绝改变高度身体。

我已经在Edge和Chrome中检查了控制台，似乎没有问题，所以我完全迷失在这里。通常情况下，我可以在网上找到答案，而且我从来没有得到过帮助，但此时我觉得这是一个如此简单的问题，我不知道为什么它不起作用。

很抱歉，如果这个问题写得不好，但是有没有人知道为什么JavaScript可能不允许改变身体的高度？

TL; DR：

内容div位于绝对位置，可根据场景进行更改
页脚div在底部静态定位，并且应该通过允许用户在内容div的末尾下方滚动几百个像素来显示在内容div下方
我想通过改变身体的高度来实现这一目标，这通过html中的硬编码完美地工作但是由于某种原因，JavaScript拒绝改变身体的高度

Answer 1

设置body元素的高度，问题所需的方式，因其与html元素及其默认CSS（如position: static {{1}的关系而变得复杂} {}，以及body属性。阅读更多here。

根据我在chrome控制台上的实验，您无法通过overflow设置身高，它似乎是只读的。您需要在CSS中设置高度（可能还有溢出）属性（通过document.body.clientHeight获取javascript）。

但是，我认为你想要的效果的最佳解决方案根本不涉及设置body（或html）属性。试试这个：

默认情况下，页脚元素具有CSS：document.body.style
检测用户何时滚动到页面底部（使用jQuery或display: none）或底部减去某些偏移量
将页脚的CSS更改为scrollTop（最好通过切换类，或编辑样式属性）。这将自动增加主体的滚动条以容纳页脚。
当用户向上滚动超出页脚（或第2点为false）时，再次将其CSS设置为display: block。

使用上述方法，无需硬编码或事先了解页脚和非页脚内容的高度。你不需要搞乱html或body元素CSS。如果需要，您还可以应用CSS动画！

Answer 2

试试这样：

document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';

您必须指定单位才能获得正确的结果。就像你在CSS中一样。

如何使用JavaScript设置身高？

2 个答案: