Question

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

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

正如你在我的CSS中看到的那样，我尝试为身体设置100％的高度，然后制作一个包装div和一个推div。它确实将页脚向下推，但不是一直到屏幕的末端。出于某种原因，我认为它似乎没有在身体上获得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%;
}

Answer 2

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

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

我为html元素提供了600px的静态高度，只是为了显示页脚到底，您可以删除它以获取实际代码。

Answer 3

将此添加到您的css：

body, html {
    height: 100%;
}

然后从包装中取出页脚并将其放在包装器

之后

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

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

Answer 4

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

页脚需要不在包装器div标签中。

Bootstrap粘性页脚不粘

4 个答案: