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

Question

I'm working on my first website and trying to come up with a way to make my wrapper div's height be equal to the height of the browser window minus the fixed-height of the nav menu. I first tried a css solution, using:

html body { height: 100% }

and then setting the height of the wrapper div to that value, but it would always make the wrapper div the height of the whole window, including the height of the menu. Since I have a fixed value in the menu and would like a variable value for the height of the wrapper (I want .wrapper height = 100vh - 60px), I felt that I couldn't solve this problem using CSS and had to finally face Javascript. So I wrote this code in a separate .js file and referenced in the head of the html document:

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

There might be a million problems with this code, but what I can't get past is Chrome telling me that document.getElementById("sitenav").style.height is returning null. Is this because, when this script is run, the height of #sitenav hasn't been loaded yet? If so, how can I execute this script so that the wrapper displays correctly on loading the page?

Also, if I'm going down the completely wrong path, please let me know. This is my first experience using Javascript in context, so I apologize if something is blatantly obvious.

Answer 1

I recommend using jQuery:

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

That should do the trick then

Btw, to use jQuery, paste this on the top of your code:

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