3

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

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

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

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

4

4 回答 4

3

Do following changes in you CSS. .footer class has absolute position for sticking the footer at the bottom of the screen. 

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%;
}
于 2013-10-25T15:49:40.617 回答
2

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

我为您的网站制作了一个代码笔，并将适当的类添加到 css 样式表的顶部（不是内联）：检查一下。

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

于 2013-10-25T15:15:10.700 回答
0

将此添加到您的CSS：

body, html {
    height: 100%;
}

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

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

.wrapper {
    margin: 0 auto -110px;
}
于 2013-10-25T15:21:34.250 回答
0

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

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

于 2013-10-25T15:36:44.870 回答