html - Bootstrap 粘性页脚不粘

Question

我的免费 Bootstrap 模板中的页脚有一些问题。我尝试了其他人已经提供但没有结果的多种解决方案。

代码似乎太长了，所以我在这里上传了 html 文件和资源到我的服务器； http://kellyvuijst.nl/about.html

正如您在我的 css 中看到的那样，我尝试为 body 设置 100% 高度，然后制作包装器 div 和推送 div。它确实将页脚向下推了一点，但并没有一直推到屏幕的末尾。出于某种原因，它似乎没有达到我认为的 body 100% 的高度？

上面的方法显然在这里有效； http://getbootstrap.com/2.3.2/examples/sticky-footer.html但似乎不适用于我的模板，这是为什么？

Answer 1

在您的 CSS 中进行以下更改。 .footer 类具有将页脚粘贴在屏幕底部的绝对位置。

html, body {
min-height: 100%; /* you Already have this */
height: 100%; /* Add this */
 }
/* No need of */
.wrapper {
    height: auto !important;
    height: 100%;
}
/* Add this css */
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}