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 ，但似乎在我的模板上不起作用，为什么呢？

- Jane

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%;
}

- Tushar

Answer 2

您的页脚位于包装器内，而您尚未对包装器应用任何必要的样式。如果您正在遵循Bootstrap的粘性页脚模板，那么您可能没有注意到所有与粘性页脚有关的CSS都包含在标题中的内联样式块中。您还没有关闭.wrapper div，并且在该div的开放标签下面的代码没有缩进，这可能是您忘记关闭它的原因。

我在您的网站上添加了正确的类到css样式表的顶部（而不是内联），并创建了一个CodePen：请查看。 我给html元素设置了静态高度为600px，只是为了显示页脚到底部，您可以在实际代码中删除此内容。

- Shawn Erquhart

---

你应该增加更多细节来完善你的回答。 - Loïc Faure-Lacroix

Answer 3

将以下代码添加到你的CSS文件中：

body, html {
    height: 100%;
}

然后将页脚从包装器中移除，并将其放在包装器之后

最后，您需要更改包装器的边距为：

.wrapper {
    margin: 0 auto -110px;
}

- Hive7

Answer 4

HTML的布局在这里概述：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ 页脚需要位于包装器div标签之外。

- Lewis Wrightson