calc()在Firefox中不起作用。

Question

calc()在Firefox中不起作用。

7

我在尝试使用calc()函数让我的页面内容完美地适应页面。我的页眉高度为52像素。我要让一个容器占据整个页面减去50像素的宽度，这样它就可以完美地适应页面，然而，在Chrome、Edge和Internet Explorer中它可以工作，但在Firefox中则不行。

Chrome： Chrome结果 Firefox： Firefox结果

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>

- user7736094

我正在尝试使用你的CSS，但在这一行height: -moz-calc(100% - 52px);中，在VS 2017中得到了一个注释，指出它不是Height属性的有效值。有什么想法吗？ - Mark

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user7736094 · Accepted Answer

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

html,
body {
 height: 100%;
}