问题
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>
回答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%;
}
来源:https://stackoverflow.com/questions/43029822/calc-not-working-in-firefox