Question

我正在尝试使用calc()函数，但它返回错误的值。

我正在使用它：

height: calc(100% - 45px);  
height: -webkit-calc(100% - 45px);  
height: -moz-calc(100% - 45px);

..但它将高度设置为 55％。为什么？我在这里做错了什么？

http://jsfiddle.net/L7x9j/

Answer 1

我遇到了同样的问题，Calc()正在计算错误的％年龄。

将严格的数学设置为on。

height: ~"calc(100% - 50px)";

这解决了我的问题。

Answer 2

calc()没有错，它有效。您只需为100% / body元素设置html的高度，以使其按需运行。

将this example（不含html, body { height:100%; }）与此fixed example进行比较。

html, body {
    height:100%;
}
#mid-content {
    width: 100%;
    height: calc(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    border:1px solid red;
}

此外，值得注意的是header是50px，而不是45px。我还添加了box-sizing:border-box，以便在元素框模型计算中包含边框/填充。

如果屏幕尺寸小于~700px，您可能会注意到底部有空格。这是因为以下原因：

#mid-content h1 {
    width: 300px;
    height: 250px;
    font-size: 58px;
    line-height: 1em;
    font-family:'Oswald', sans-serif;
    margin: 100px auto 70px auto;
    color: white;
}

删除height / margin会修复它。 (example)

使用CSS3 calc（）函数

2 个答案: