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

我在我的第一个网站上工作，并试图想出一种方法来使我的包装div的高度等于浏览器窗口的高度减去导航菜单的固定高度。我第一次尝试的CSS解决方案，使用：使用Javascript来计算固定高度导航下的包装div的高度

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();

可能有一百万的问题与此代码，但我不能让过去的铬告诉我那个document.getElementById（“sitenav”）。style.height返回null。这是因为，当这个脚本运行时，#sitenav的高度尚未加载？如果是这样，我该如何执行这个脚本，以便在加载页面时正确显示包装？

另外，如果我要走完全错误的道路，请让我知道。这是我第一次在上下文中使用Javascript，所以我很抱歉，如果有什么明显的东西。

来源

2016-03-16 Master_raro

我建议使用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>

来源

2016-03-16 15:32:48

感谢您的回答！你为什么认为jQuery在这种情况下更好，或者你的意思是说它一般更好？ –

''windowHeight''不应该通过引号.. –

哦，是的，忘记了，对不起。编辑。一般来说，我是jQuery的粉丝。它非常轻巧，当你开始的时候，它可以帮助你理解JavaScript。 –

尝试menuHeight ：document.getElementById（“sitenav”）。clientHeight。此外，由于contentHeight（）函数被包装在wrapperHeight对象中，所以我想你需要将它称为wrapperHeight.contentHeight（）。

此外，contentHeight（）函数参数对我来说看起来没用。

当您在头标签内引用JS文件时，HTML当时不会呈现。因此，要么将您的代码封装在window.onload事件函数中，要么在body标签的底部声明引用。

来源

2016-03-16 17:05:54

你的意思是contentHeight（）的参数是多余的吗？我不确定他们是否有必要。 –

是的。那就是我的意思。 –

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

回答

相关问题