使用Javascript计算固定高度导航下包装器div的高度

Question

我正在第一个网站上工作，试图找到一种方法，使包装器div的高度等于浏览器窗口的高度减去导航菜单的固定高度。 我首先尝试使用CSS解决方案，方法是：

html body { height: 100% }

然后将wrapper div的高度设置为该值，但这将始终使wrapper div成为整个窗口的高度，包括菜单的高度。 因为我在菜单中有一个固定值，并且想要一个可变的包装高度值（我想.wrapper height = 100vh-60px），所以我觉得我无法使用CSS解决此问题，因此不得不面对Javascript。 因此，我在单独的.js文件中编写了此代码，并在html文档的开头引用了该代码：

var wrapperHeight = {
windowHeight: window.innerHeight,
menuHeight: document.getElementById("sitenav").style.height,
contentHeight: function (windowHeight, menuHeight) {
    return this.windowHeight - this.menuHeight;
}
};
document.getElementByClassName("wrapper").style.height = contentHeight();

这段代码可能有上百万个问题，但是我无法避免的是Chrome告诉我document.getElementById（“ sitenav”）。style.height返回null。 这是因为在运行此脚本时，尚未加载#sitenav的高度吗？ 如果是这样，我如何执行此脚本，以便包装器在加载页面时正确显示？

另外，如果我走的是完全错误的道路，请告诉我。 这是我在上下文中使用Javascript的第一次经验，因此，如果有任何明显的事情，我深表歉意。

Answer 1

我建议使用jQuery：

var windowHeight = $(window).height();
$('body').css('height', windowHeight);

那应该可以解决问题

顺便说一句，要使用jQuery，请将其粘贴到代码顶部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>