calc() not working in Firefox

Question

I am trying to use calc() to get my page contents to fit on the page perfectly. I have a header with a height of 52px. I am trying to make a container 100% of the page -50px to it fits onto the page perfectly, however as it does work in Chrome, Edge, and Internet Explorer, it doesn't in Firefox.

Chrome: Chrome result

Firefox: Firefox result

div#container {

	width: 20%;

	height: 100%;

	height: calc(100% - 52px);

	height: -moz-calc(100% - 52px);

	height: -webkit-calc(100% - 52px);

	float: left;

}

<div id="container"></div>

Answer 1

Turns out I need to set the height of the body to 100% for it to take effect. Just thought I would let other users know in case they come across the same problem.

html,
body {
	height: 100%;
}