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>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%;
}