Question

我有一个带有标题，菜单，包装和页脚的网页。我试图通过将所有组件的高度设置为与包装器分开来使页脚粘稠，然后使用calc来确定所述包装器的最小高度。浏览器在inspect元素中选取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/

Answer 2

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

试试这个：

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

更新：因为那很可能不会起作用，尝试使用身高而不是min-height

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

calc（）中忽略第二个数字

2 个答案: