如何用JavaScript设置身高？

问题描述 投票：-1回答：2

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>

我有一个页面div与position: fixed; bottom: 0px;和一个主要内容div与position: absolute;。

基本上这个想法是让主要内容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拒绝改变身体的高度
javascript html css
2个回答
0
投票

试试这样：

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

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

1
投票

设置body元素的高度，在你的问题中你想要的方式，由于它与html元素及其默认CSS（如position: static上的body）和overflow属性的关系而变得复杂。阅读更多here。

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

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.