calc() 在 Firefox 中不起作用

Question

我正在尝试使用 calc() 让我的页面内容完美地适合页面。我有一个高度为 52px 的标题。我正在尝试使容器 100% 的页面 -50px 完美地适合页面，但是由于它在 Chrome、Edge 和 Internet Explorer 中工作，它在 Firefox 中不起作用。

铬： 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>

Answer 1

原来我需要将 body 的高度设置为 100% 才能生效。只是想我会让其他用户知道，以防他们遇到同样的问题。

html,
body {
	height: 100%;
}