我使用 twitter 引导框架已经有一段时间了，他们最近更新到了第 3 版！
我无法让粘性页脚粘在底部，我使用了 twitter bootstrap 网站提供的起始模板，但仍然没有运气，有什么想法吗？
【问题讨论】：
标签： html css twitter-bootstrap twitter-bootstrap-3
只需将类 navbar-fixed-bottom 添加到您的页脚。
<div class="footer navbar-fixed-bottom">
【讨论】：
参考官方 Boostrap3 粘页脚示例，
不用加<div id="push"></div>，CSS更简单。
官方示例中使用的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;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
和基本的 HTML：
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
你可以在sticky-footer example的源代码中找到这个css的链接。
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
完整网址： https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
【讨论】：
这是一种添加粘性页脚的方法，除了 Bootstrap 中已有的内容之外，不需要任何额外的 CSS 或 Javascript，并且不会干扰您当前的页脚。
此处示例：Easy Sticky Footer
只需将其复制并直接粘贴到您的代码中即可。不要大惊小怪。
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
【讨论】：
【讨论】：
这是今天的Sticky Footer simplified code，因为他们一直在优化它，这很好：
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;
}
【讨论】：
我在这个问题上有点晚了，但我遇到了这篇文章，因为我刚刚被这个问题所困扰，终于找到了一个非常简单的方法来克服它，只需使用 navbar 和 @987654322 @类启用。例如：
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
【讨论】：
这是我对此问题的最新解决方案。
/* 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;
border-top: 1px solid #eee;
text-align: center;
}
.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}
并像这样使用它：
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>
</div>
或者
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
【讨论】：
some text<br> 并缩小窗口大小。
粘性示例对我不起作用。 我的解决方案：
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
【讨论】：
推送div 应该紧跟在wrap 之后，而不是在......就像这样
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
【讨论】：
由 OP 回答：
将此添加到您的 CSS 文件中。
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 -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
【讨论】：
我想要一个灵活的粘性页脚，这就是我来这里的原因。热门答案让我朝着正确的方向前进。
当前（16 年 10 月 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 就会创建一个推力，让页脚可以放入一个口袋。在这种情况下，两者都设置为 60 像素。但是如果页脚不固定，超过 60px 高度，就会覆盖你的页面内容。
使灵活：删除 css 正文边距和页脚高度。然后添加 JavaScript 以获取页脚高度并设置正文 marginBottom。这是通过 setfooter() 函数完成的。接下来添加事件侦听器，用于页面首次加载和调整运行 setfooter 的大小。注意：如果您的页脚有手风琴或其他任何触发大小更改的东西，而没有调整窗口大小，您必须再次调用 setfooter() 函数。
运行 sn-p 然后全屏演示。
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>【讨论】：
这已经被 flexbox 解决了，一劳永逸：
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
【讨论】：
简单的js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
更新 #1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
【讨论】：
总结所有这些，请记住一件事，即除了页脚之外的所有内容都应该有 min-height: 100% 或更少。
【讨论】：
我使用 LESS 编写了带有填充的简化粘性页脚代码。这个答案可能是题外话，因为这个问题没有讨论填充，所以如果你有兴趣查看this post了解更多详情。
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
【讨论】：
基于Jek-fdrv's answer，我添加了.on('resize', function()，以确保它适用于所有设备和每种分辨率：
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
【讨论】：
当前版本的 bootstrap 似乎不再适用于此功能。如果您下载他们的sticky-footer-navbar 示例并在主体区域中放置大量内容，则页脚将被向下推到视口底部。一点都不粘。
【讨论】：
这是一个基于 CSS 的完全响应式可变高度粘性页脚解决方案。
优势：页脚允许可变高度，因为高度不再需要在 CSS 中进行硬编码。
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>这里是不带前缀的SCSS（对于gulp/grunt）：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
【讨论】：
只需使用弹性！确保在您的 HTML 中使用 body 和 main，这是最好的解决方案之一（除非您需要 IE9 支持）。它不需要固定的高度或类似的高度。
这也是 Materialise 的推荐方法！
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
【讨论】：
用 Haml 和 Sass 的话来说都是必要的：
app/view/layouts/application.html.haml的Haml
%html
%head
%body
Some body stuff
%footer
footer content
app/assets/stylesheets/application.css.sass 的 Sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
【讨论】：
如果您想在页脚类中使用引导程序构建。你还应该写一些javascript：
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
通过固定页脚防止内容重叠，并在用户更改窗口/屏幕大小时调整padding-bottom。
在上面的脚本中，我假设页脚直接放在 body 标签内：
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
这绝对不是最好的解决方案（因为 JS 是可以避免的），但它工作时没有任何重叠问题，易于实现和响应（height 不是在 CSS 中硬编码）。
【讨论】：
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}<footer>
<div class="footer">
<div class="container-fluid" id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright © Your words</p>
</div>
</div>
</div>
</div>
</footer>【讨论】：
这是一个非常简单干净的粘性页脚，您可以在引导程序中使用。完全响应！
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
示例：CodePen Demo
【讨论】：
使用flexbox 是我从CSS-tricks 的人那里找到的最简单的方法。这是真正的粘性页脚，它在内容小于页面的 100% 且大于页面的 100% 时起作用：
<body>
<div class="content">
content
</div>
<footer></footer>
</body>
还有 CSS：
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
请注意，这是与引导程序无关的，因此它可以与引导程序一起使用，也可以在没有引导程序的情况下使用。
【讨论】：
您可以简单地尝试在页脚导航栏上添加一个类：
navbar-fixed-bottom
然后像这样创建一个名为 custom.css 和 body 填充的 CSS..
body { padding-bottom: 70px; }
【讨论】：
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
.footer {
position: fixed;
bottom: 0;
}
【讨论】：