2

我有一个带有页眉、菜单、包装器和页脚的网页。我试图通过设置除包装器之外的所有组件的高度，然后使用 calc 确定所述包装器的最小高度来使页脚具有粘性。浏览器在检查元素中选择了 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

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

4

2 回答 2

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/

于 2013-10-25T12:27:48.363 回答
-1

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

尝试这个：

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

更新：因为这很可能不起作用，请尝试使用高度而不是最小高度

height: -moz-calc(100% - 545px);
于 2013-10-25T12:20:07.847 回答