我使用 twitter 引导框架已经有一段时间了，它们最近更新到了第 3 版！
我无法让粘性页脚粘在底部，我使用了 twitter bootstrap 网站提供的起始模板，但仍然没有运气，有什么想法吗？
问问题
344031 次
26 回答
196
只需将类 navbar-fixed-bottom 添加到您的页脚。
<div class="footer navbar-fixed-bottom">
于 2014-02-06T13:20:56.573 回答
154
参考官方的Boostrap3 Sticky footer示例，无需添加<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 示例的源代码中找到此 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
于 2013-12-16T13:08:10.077 回答
52
这是一种添加粘性页脚的方法，除了 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>
于 2015-02-21T16:59:31.337 回答
31
这是截至今天的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;
}
于 2014-04-08T21:18:53.220 回答
28
我在这个主题上有点晚了，但是我遇到了这篇文章，因为我刚刚被这个问题所困扰，最后找到了一种非常简单的方法来克服它，只需使用navbar启用navbar-fixed-bottom类的 a 。例如：
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
高温高压
于 2014-05-01T15:02:57.797 回答
10
这是我对此问题的更新解决方案。
/* 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;
}
于 2014-08-08T03:12:58.710 回答
4
粘性示例对我不起作用。我的解决方案：
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
于 2014-05-08T09:13:56.730 回答
2
推动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>
于 2013-10-28T22:48:48.597 回答
2
这已经被 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;
}
于 2017-08-28T13:13:17.120 回答
2
简单的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());
});
于 2015-12-15T03:55:16.503 回答
2
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;
}
}
于 2016-05-11T10:52:10.970 回答
2
我想要一个灵活的粘性页脚，这就是我来这里的原因。热门答案让我朝着正确的方向前进。
当前（16 年 10 月 2 日）Bootstrap 3 css Sticky 页脚（固定大小）如下所示：
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 以获取页脚高度并设置正文 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>于 2016-10-03T01:49:44.417 回答
1
总结所有这些，只要记住一件事，除了页脚之外的所有东西都应该有min-height: 100%或更少。
于 2014-11-05T11:12:29.093 回答
1
我使用 LESS 编写了带有填充的简化的粘性页脚代码。这个答案可能是题外话，因为这个问题没有谈到填充，所以如果你有兴趣查看这篇文章以获取更多详细信息。
@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;
}
于 2015-01-03T21:17:24.017 回答
1
当前版本的引导程序似乎不再适用于此功能。如果您下载他们的sticky-footer-navbar 示例并在主体区域中放置大量内容，则页脚将被向下推到视口底部。它一点也不粘。
于 2016-12-01T22:26:16.313 回答
1
根据Jek-fdrv 的回答，我添加了一个.on('resize', function()以确保它适用于每台设备和每一种分辨率：
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
于 2016-04-27T02:01:56.863 回答
1
这是一个基于 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（for gulp/ grunt）：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
于 2016-12-30T21:01:49.163 回答
1
只需使用弹性！确保在您的 HTML 中使用 body 和 main ，这是最好的解决方案之一（除非您需要 IE9 支持）。它不需要固定的高度或类似的高度。
这也是 Materialise 的推荐方法！
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
于 2017-05-11T19:54:54.693 回答
0
用 Haml & Sass 的话来说，这一切都是必要的：
哈姆尔app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
萨斯app/assets/stylesheets/application.css.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
于 2014-04-14T09:40:50.117 回答
0
#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>于 2015-01-27T16:41:20.267 回答
0
如果您想在页脚类中使用引导程序构建。您还应该编写一些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 中没有硬编码）。
于 2014-11-10T16:05:05.773 回答
0
使用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;
}
请注意，这是与引导程序无关的，因此它可以与引导程序一起使用，也可以在没有引导程序的情况下使用。
于 2017-01-14T08:35:06.767 回答
0
您可以简单地尝试在页脚导航栏上添加一个类：
navbar-fixed-bottom
然后像这样创建一个名为custom.css和body padding 的 CSS ..
body { padding-bottom: 70px; }
于 2016-08-23T06:46:52.187 回答
0
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;
}
于 2021-01-20T11:06:19.777 回答
0
这是一个非常简单且干净的粘性页脚，您可以在引导程序中使用。完全响应！
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 演示
于 2015-10-24T23:48:52.227 回答