第二个数字在calc中被忽略（）

我有一个带有标题，菜单，包装和页脚的网页。我试图通过设置除包装以外的所有组件的高度，然后使用calc来确定所述包装的最小高度来使页脚变得粘稠。浏览器在检查元素中提取calc函数，但是当我检查包装的高度时，它总是100％而不是100％ - 545px，我不知道为什么。我已经在Firefox和Chrome以及不同尺寸的显示器上测试过它，但没有喜悦。有什么我做错了吗？第二个数字在calc中被忽略（）

#wrapper-fullwidth{ 
/* Firefox */ 
min-height: -moz-calc(100% - 545px); 
/* WebKit */ 
min-height: -webkit-calc(100% - 545px); 
/* Opera */ 
min-height: -o-calc(100% - 545px); 
/* Standard */ 
min-height: calc(100% - 545px); 
}

jsfiddle

非常感谢提前任何帮助，您可以提供。

来源

2013-10-25 silverlight513

的jsfiddle请，但我的猜测是，相当于100％的像素是一个变量数，因此基地“号”不存在。 –

Opera（Presto）不支持'calc（）'（并且大多数移动浏览器都不支持），所以没有理由为它提供前缀。 – cimmanon

@cimmanon支持几乎所有的现代浏览器：[链接]（http://caniuse.com/calc） – silverlight513

我想你需要尝试这样的事情。

如果这是你的HTML（或类似）：

<div class="header">Header</div> 
<div class="main">Main</div> 
<div class="footer">Footer</div>

的CSS需要看起来像：

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
.main { 
    min-height: -moz-calc(100% - 90px); 
    min-height: -webkit-calc(100% - 90px); 
    min-height: -o-calc(100% - 90px); 
    min-height: calc(100% - 90px); 
    background-color: lightgray; 
} 
.header, .footer { 
    height: 45px; 
    background-color: yellow; 
}

您需要的高度设置为html和body否则百分比高度在.main未定义。

演示在：http://jsfiddle.net/audetwebdesign/2e3dK/

来源

2013-10-25 12:27:48

我已经设置了html和body。我也不能使用position：固定为footer div。我为这个问题添加了一个jsfiddle。 – silverlight513

我误解了您的原始问题并修改了我的解决方案。无论您如何定位页脚，它都可以工作。看到更新的小提琴。 –

谢谢，它的作品很棒:) – silverlight513

-1

我的猜测是px在最后使他们成为字符串而不是整数。

试试这个：

min-height: -moz-calc(100% - 545);

更新：自认为最有可能无法正常工作，请尝试使用高度，而不是最小高度

height: -moz-calc(100% - 545px);

来源

2013-10-25 12:20:07 Garlov

令人怀疑...其他明智的可能是545px，545em，545cm！ https://developer.mozilla.org/en-US/docs/Web/CSS/calc –

难道这是因为最小高度，因为它可以更大，所以有必要使用高度呢？ – Garlov

第二个数字在calc中被忽略（）

回答

相关问题