使用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>