使用 CSS3 calc() 函数答案

【问题标题】：Using CSS3 calc() function使用 CSS3 calc() 函数
【发布时间】：2014-07-03 01:57:34
【问题描述】：

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

我正在使用这个：

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

..但它将 height 设置为 55%。为什么？我在这里做错了什么？

http://jsfiddle.net/L7x9j/

【问题讨论】：

虽然我不知道你的问题的答案，但我知道height: -webkit-height: calc(...); 不是有效的CSS。我想你想要height: -webkit-calc(...);。
在我的代码中，就像@Jordan 指出的那样......对不起，我的错！我只是在这里写错了。 =s
您在哪个浏览器（和版本）中得到了错误的结果？你是如何检查得到的高度是55%的？
@PlayHardGoPro 在示例中，您明确设置了calc(55%)。你是不是加错了jsFiddle？
Less Aggressive Compilation with CSS3 calc的可能重复

标签： css

【解决方案1】：

calc() 没有任何问题，它可以工作。您只需将body/html 元素的高度设置为100% 即可使其按需要工作。

将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)

【讨论】：

我认为问题出在 .less 文件上，不是吗？或者您的答案是 .less 编译器设置 calc(55%) 的原因？
@PlayHardGoPro 查看更新后的答案。这就是你所追求的吗？
@JoshCrozier 问题在于 OP 使用 LESS 创建最终的 css 文件，而 LESS 已经产生了不正确的calc(55%)。
LESS问题是可以解决的，之前已经回答过多次了，例如：stackoverflow.com/questions/11972084/…
@PlayHardGoPro 不，您仍然可以使用 LESS。使用height: ~"calc(100% - 50px)"; 见：stackoverflow.com/questions/17904088/…

【解决方案2】：

我遇到了同样的问题，Calc() 计算的 %age 有误。

保持严格的数学设置为on。

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

这为我解决了这个问题。

【讨论】：