Bootstrap粘页脚不粘答案

【问题标题】：Bootstrap sticky footer not stickingBootstrap粘页脚不粘
【发布时间】：2013-11-04 18:54:54
【问题描述】：

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

代码似乎太长，无法在此处发布，因此我将 html 文件和资产上传到此处的服务器； http://kellyvuijst.nl/about.html

正如你在我的 css 中看到的，我尝试为 body 设置 100% 的高度，然后制作一个 wrapper div 和一个 push div。它确实将页脚向下推，但不是一直推到屏幕的末尾。出于某种原因，我认为它似乎没有达到 100% 的高度？

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

【问题讨论】：

标签： html css twitter-bootstrap footer twitter-bootstrap-2

【解决方案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%;
}

【讨论】：

【解决方案2】：

您的页脚位于包装器内，并且您没有将任何必要的样式应用于包装器。如果您遵循 Bootstrap 的粘性页脚模板，您可能没有注意到与粘性页脚相关的所有 css 都包含在页眉的内联样式块中。您也没有关闭 .wrapper div，并且该 div 的开始标记下方的代码没有缩进，这可能是您忘记关闭它的原因。

我为您的网站制作了一个 codepen，并将适当的类添加到 css 样式表的顶部（不是内联）：check it out.

我为 html 元素设置了 600 像素的静态高度，只是为了显示页脚位于底部，您可以将其删除以用于您的实际代码。

【讨论】：

您应该提供更多详细信息。

【解决方案3】：

将此添加到您的 CSS：

body, html {
    height: 100%;
}

然后把footer从wrapper中去掉，放在wrapper之后

最后你需要将包装器上的边距更改为：

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

【讨论】：

【解决方案4】：

此处概述了 HTML 的布局：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

页脚需要在包装器 div 标签之外。

【讨论】：