我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?
当前回答
我在这个问题上有点晚了，但我看到了这篇文章，因为我刚刚被这个问题咬伤了，最终找到了一个非常简单的方法来克服它，简单地使用导航栏与导航栏固定底部类启用。例如:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
其他回答
下面是Sticky Footer的简化代码，因为他们一直在优化它，这是很好的:
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
我想要一个灵活的粘性页脚，所以我才来这里。最重要的答案让我找到了正确的方向。
当前(10月16日2日)Bootstrap 3 css Sticky footer(固定大小)看起来像这样:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
只要页脚的大小是固定的，body margin-bottom就会产生一个推力，让页脚可以坐进去。在本例中，两者都设置为60px。但如果页脚不是固定的，高度超过60px，它将覆盖你的页面内容。
使灵活:删除css正文边距和页脚高度。然后添加JavaScript来获取页脚高度，并设置body的marginBottom。这是通过setfooter()函数完成的。接下来添加事件监听器，用于页面第一次加载和调整大小时运行setfooter。注意:如果你的页脚有一个手风琴或其他触发大小变化的东西，而没有调整窗口的大小，你必须再次调用setfooter()函数。
运行代码片段，然后全屏演示。
function setfooter(){ var ht = document.getElementById("footer").scrollHeight; document.body.style.marginBottom = ht + "px"; } window.addEventListener('resize', function(){ setfooter(); }, true); window.addEventListener('load', function(){ setfooter(); }, true); html { position: relative; min-height: 100%; } .footer { position: absolute; bottom: 0; width: 100%; /* additional style for effect only */ text-align: center; background-color: #333; color: #fff; } body{ /* additional style for effect only not needed in bootstrap*/ padding:0; margin: 0; } <div> Page content <br> <br> line 3 <br> <br> line 5 <br> <br> line 7 </div> <footer id="footer" class="footer"> <div class="container"> <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p> </div> </footer>
Html
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
CSS
.footer {
position: fixed;
bottom: 0;
}
你可以简单地尝试在页脚导航栏上添加一个类:
navbar-fixed-bottom
然后创建一个CSS命名为custom.css和body padding像这样..
body { padding-bottom: 70px; }
使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。
这也推荐用于Materialize !
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
