我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
bootstrap是这样做的:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
只需使用页面源代码，您就应该能够看到。不要忘记<div id="wrap">在顶部。
其他回答
发现这里的片段工作得很好
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
下面是如何从官方页面实现这个功能:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
我刚刚测试了一下，它工作得很好!:)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
相关的CSS代码如下:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
页脚高度匹配wrap元素的底部缩进的大小。
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
HTML
<div id="wrapper">
<div id="content">
<!-- navbar and containers here -->
</div>
<div id="footer">
<!-- your footer here -->
</div>
</div>
CSS
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 100px; /* Height of the footer element */
}
#footer {
width: 100%;
height: 100px; /* Adjust to the footer needs */
position: absolute;
bottom: 0;
left: 0;
}
为了让你的粘性页脚工作，你需要包装你的.container-fluid div，你还缺少了.wrapper类的一些属性。试试这个:
从body标签中删除padding-top:70px，并将其包含在.container-fluid中，如下所示:
.wrapper > .container-fluid {
padding-top: 70px;
}
我们必须这样做，因为向下推主体以适应导航条，最终会将页脚推得更远一点(更远70px)，超过视口，所以我们得到了一个滚动条。相反，使用.container-fluid div会得到更好的结果。
接下来，我们必须将.wrapper类从.container-fluid div外面移除，然后用它来包装#main div，如下所示:
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="push"></div>
</div>
</div>
你的页脚当然必须在。wrapper div之外，所以从'。包装div并把它放在外面，像这样:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
在这一切完成后，通过使用负边距正确地将你的页脚推向你的.wrapper类，如下所示:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
这应该可以工作，尽管你可能需要修改一些其他的东西来让它在屏幕调整大小时工作，比如在.wrapper类上重置高度，如下所示:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
