css - 需要一些帮助来尝试让这个粘性页脚恰到好处

Question

有问题的网站:http://www.flowersbe.com

所以我没有遇到让页脚粘在底部的问题，我的问题是我的容器上有一个顶部边距，它将页脚向下推到浏览器底部 25 像素之外，这在上述网站的联系页面。我想在顶部保留 25 像素的空间，但我仍然希望页脚完全可见...下面是我的容器和页脚的 CSS...关于如何解决此问题的任何想法？

html,
body {
    height: 100%;
}

#container {
    width: 960px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 25px auto -50px;
    background-color: #fff;
}


footer {
    clear: both;
    width: 960px;
    height: 35px;
    margin: 0 auto;
    padding: 15px 0 0 0;
    background-color: #ffebeb;
    text-align: center;
}

.push {
    height: 50px;
}

Answer 1

我相信要准确地实现您想要做的事情，您必须引入一些 JavaScript 来计算 #container 应该是的确切高度。

它将 100% 的 height 转换为视口(viewport)的准确高度，然后在其上添加 25px 的边距。我能想到的解决这个问题的唯一方法是使用 JavaScript 获取视口(viewport)的高度并将 #container 的高度设置为该值减去 25px。

不涉及 JS 的可能替代解决方案:

• 只需放下 min-height 并允许 #container 达到所需的高度即可。
• 在 footer 上使用 position: fixed 以确保页脚始终位于视口(viewport)的底部，但请注意它会位于任何内容的顶部足以超出视口(viewport)的高度。

这是否足以让您继续下去？