Html Twitter Bootstrap 3 粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17966140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 Sticky Footer
提问by Brad Fletcher
I have been using the twitter bootstrap framework for quite a while now and they recently updated to version 3!
我使用 twitter bootstrap 框架已经有一段时间了，他们最近更新到了第 3 版！
I'm having trouble getting the sticky footer to stick to the bottom, I have used the starter template supplied by the twitter bootstrap website, but still no luck, any ideas?
我无法让粘性页脚粘在底部，我使用了 twitter bootstrap 网站提供的入门模板，但仍然没有运气，有什么想法吗？
回答by Jon
just add the class navbar-fixed-bottom to your footer.
只需将类 navbar-fixed-bottom 添加到您的页脚。
<div class="footer navbar-fixed-bottom">
回答by tkymtk
Referring to the official Boostrap3 sticky footer example,
there is no need to add <div id="push"></div>, and the CSS is simpler.
参考官方的Boostrap3粘性页脚示例，无需添加<div id="push"></div>，CSS更简单。
The CSS used in the official example is:
官方例子中使用的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;
}
and the essential HTML:
和基本的 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>
You can find the link for this css in the sticky-footer example's source code.
您可以在粘性页脚示例的源代码中找到此 css 的链接。
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
Full URL : http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
完整网址：http: //getbootstrap.com/examples/sticky-footer/sticky-footer.css
回答by anataliocs
Here is a method that will add a sticky footer that doesn't require any additional CSS or Javascript other than what's already in Bootstrap and won't interfere with your current footer.
这是一种添加粘性页脚的方法，除了 Bootstrap 中已有的内容之外，不需要任何额外的 CSS 或 Javascript，并且不会干扰您当前的页脚。
Example here: Easy Sticky Footer
这里的例子： 简单的粘性页脚
Just copy and paste this directly into your code. No fuss no muss.
只需将其直接复制并粘贴到您的代码中即可。没有大惊小怪。
<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>
回答by David Taiaroa
In addition to the CSS you just added, remember you need to add the push divbefore closing the wrap div
除了刚刚添加的CSS，记得在关闭wrap div之前需要添加pushdiv
The basic structure for the HTML is
HTML的基本结构是
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
回答by Leniel Maccaferri
Here's the Sticky Footer simplified codeas of today because they're always optimizing it and this is GOOD:
这是截至今天的Sticky Footer 简化代码，因为他们一直在优化它，这很好：
HTML
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
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;
}
回答by iMil
I'm a bit late on the subject but I came across this post as I've just been bitten by that question and finally found a really easy way to get over it, simply use a navbarwith the navbar-fixed-bottomclass enabled. For example:
我在这个主题上有点晚了，但我遇到了这篇文章，因为我刚刚被这个问题咬了一口，终于找到了一个非常简单的方法来解决它，只需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>
HTH
HTH
回答by zee
Here is my updated solution to this issue.
这是我对此问题的更新解决方案。
/* 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;
}
And use it like this:
并像这样使用它：
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>? Zee and Company<span></span></li>
</ul>
</div>
</div>
Or
或者
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;
}
回答by Andi Giga
The sticky example doesn't work for me. My solution:
粘性示例对我不起作用。我的解决方案：
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
回答by Joseph
The push divshould go right after the wrap, NOT within.. just like this
推送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>
回答by fdrv
Simple js
简单的js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update #1
更新 #1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
