calc() 在 Firefox 中不工作
calc() not working in Firefox
我正在尝试使用 calc() 使我的页面内容完全适合页面。我有一个高度为 52px 的 header。我试图使容器 100% 的页面 -50px 完全适合页面，但是因为它在 Chrome、Edge 和 Internet Explorer 中工作，它在 Firefox 中不工作。
Chrome:
Chrome result
火狐：
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>
原来我需要将body的高度设置为100%才能生效。只是想我会让其他用户知道，以防他们遇到同样的问题。
html,
body {
height: 100%;
}
我正在尝试使用 calc() 使我的页面内容完全适合页面。我有一个高度为 52px 的 header。我试图使容器 100% 的页面 -50px 完全适合页面，但是因为它在 Chrome、Edge 和 Internet Explorer 中工作，它在 Firefox 中不工作。
Chrome: Chrome result
火狐： 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>
原来我需要将body的高度设置为100%才能生效。只是想我会让其他用户知道，以防他们遇到同样的问题。
html,
body {
height: 100%;
}