calc() 在 Firefox 中不起作用

Posted 2023-03-07

【中文标题】calc() 在 Firefox 中不起作用

【英文标题】：calc() not working in Firefox

【发布时间】：2017-08-19 04:21:40

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

我正在尝试使用您的 CSS，但在 VS 2017 中以以下行高获得评论：-moz-calc(100% - 52px);它不是 Height 属性的有效值。有什么想法吗？

【参考方案1】：

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

html,
body 
	height: 100%;

【讨论】：

对我来说 html 和 body 不起作用，我不得不将它添加到最近的 100% 高度的父组件