Question

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

html body { height: 100% }

然后将包装器div的高度设置为该值，但它总是使包装器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（＆＃34; sitenav＆＃34;）。style.height返回null。这是因为，当这个脚本运行时，＃sitnav的高度还没有被加载？如果是这样，我如何执行此脚本以便在加载页面时正确显示包装器？

另外，如果我走错了路，请告诉我。这是我在上下文中使用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>

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

1 个答案: