如何使用 javascript 设置 div 以匹配浏览器窗口高度？答案

【问题标题】：How to set a div to match browser window height using javascript?如何使用 javascript 设置 div 以匹配浏览器窗口高度？
【发布时间】：2011-12-20 20:50:17
【问题描述】：

我正在尝试让脚本工作，但有点挣扎。

我需要创建一个在页面加载时显示的 div，并且该 div 下方的任何内容都被推离页面底部，您需要向下滚动才能查看它。

这是我所拥有的，但它不起作用（我包含了警报，以便我可以检查脚本的第一部分是否正常工作。）

<script type="text/javascript">
function getDocHeight() {
var D = document;
return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var docheight = ( getDocHeight() ) +'px';
// alert( docheight );
document.getElementById('pusher').style.height = docheight;
</script>

<div id="pusher">This content is shown on the page</div>
<p>Anything here is below the fold of the page and you will need to scroll down to see me</p>

我们将不胜感激地获得任何帮助。 :-)

【问题讨论】：

你可以用纯 css 做到这一点。
Get the window height的可能重复
是的，'html, body, #pusher { height: 100%; 有什么问题？ }´ ?
我首先尝试了纯 css，但我无法让它工作，我认为这是因为 'pusher' div 在 'wrapper' div 中。我已经重组了页面并设置了 html, body, { height: 100%; } #pusher { 最小高度：100%; } - 现在一切正常。感谢您向正确的方向轻推。

标签： javascript html height

【解决方案1】：

你想要docheight = window.innerHeight || document.documentElement.clientHeight;

编辑：虽然，记住人们可以调整他们的窗口大小，所以除非你监视window.onresize，否则要小心。

【讨论】：