html - calc() 中忽略了第二个数字

Question

我有一个带有页眉、菜单、包装和页脚的网页。我试图通过将所有组件的高度设置为与包装器分开然后使用 calc 来确定所述包装器的最小高度来使页脚变粘。 浏览器在 inspect element 中选择了 calc 函数，但是当我检查包装器的高度时，它总是 100% 而不是 100% - 545px，我不知道为什么。我已经在 firefox 和 chrome 以及不同尺寸的显示器上对其进行了测试，但没有任何乐趣。我做错了什么吗？

#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

非常感谢您提供的任何帮助。

Answer 1

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

如果这是您的 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/