CSS 如何创建与 Bootstrap 3 兼容的粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19756997/
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
How to create a sticky footer that plays well with Bootstrap 3
提问by Robert Christian
With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixedfooters, but no such facilityfor creating stickyfooters - there is a big difference.
无论是否有顶部导航，网站都有粘性页脚是很常见的。Bootstrap 具有轻松创建固定页脚的功能，但没有创建粘性页脚的功能 - 有很大的不同。
Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.
谷歌搜索这个问题会发现成百上千的开发人员有同样的问题，但没有好的答案。
Ironically, the Bootstrap documentationpage itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.
具有讽刺意味的是，Bootstrap 文档页面本身在引导程序样式和固定的顶部导航栏旁边有一个粘性页脚。不过，这都是自定义 css，而不是框架的一部分。所以一个明显的途径是采用和重构他们的自定义样式，因为它显然在 Bootstrap 框架中运行良好，但这似乎比它应该的更痛苦。
See this plunkrfor an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.
有关带有 Bootstrap 顶部导航栏和不受欢迎的非粘性页脚的示例页面，请参阅此 plunkr。
Problem:
问题：
(Thanks Softlayer - for the graphics)
（感谢 Softlayer - 提供图形）
Desired Solution:
所需的解决方案：
Of course the footer should be responsive and cross-browser friendly as well...
当然，页脚也应该具有响应性和跨浏览器友好性......
采纳答案by Robert Christian
The answer, as Schmalzy points out, can be found herein the examples section of the getbootstrap site.
答案，因为Schmalzy指出，可以发现这里在getbootstrap网站的示例部分。
But that example does not include a top nav. For fixed top nav with sticky footer, see thisplnkr, or code below.
但该示例不包括顶部导航。对于带有粘性页脚的固定顶部导航，请参阅此plnkr 或下面的代码。
Style CSS:
样式 CSS：
/* Styles go here */
/* 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;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</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><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- 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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-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>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
回答by Chris Peckham
Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches (where the height of the footer often changes at different break points). The simplest responsive sticky footer solution I've seen involves using display: tableon a top-level container, e.g.:
依赖固定高度页脚的粘性页脚解决方案在响应式方法中不受欢迎（页脚的高度通常在不同的断点处发生变化）。我见过的最简单的响应式粘性页脚解决方案涉及display: table在顶级容器上使用，例如：
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
回答by abmmhasan
The best way is to do the following:
HTML:Sticky Footer
CSS: CSS for Sticky Footer
HTML Code Sample:
最好的方法是执行以下操作：
HTML：粘性页脚
CSS：粘性页脚
HTML 代码示例的CSS：
<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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS Code Sample:
CSS 代码示例：
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;
}
Another little tweak might make it more perfect (depends on your project), so it will not affect footer on mobile views.
另一个小调整可能会使其更完美（取决于您的项目），因此它不会影响移动视图上的页脚。
@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
回答by Panchope
I've been searching for a simple way to make the sticky footer works.
I just applied a class="navbar-fixed-bottom" and it worked instantly
Only thing to keep in mind it's to adjust the settings of the footer for mobile devices.
Cheers!
我一直在寻找一种简单的方法来使粘性页脚起作用。我刚刚应用了一个class="navbar-fixed-bottom“并且它立即起作用了唯一要记住的是调整移动设备页脚的设置。干杯！
回答by Eshanel
For those who are searching for a light answer, you can get a simple working example from here:
对于那些正在寻找简单答案的人，您可以从这里获得一个简单的工作示例：
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Just play with the body's margin-bottomfor adding space between the content and footer.
只需使用body's 即可margin-bottom在内容和页脚之间添加空间。
回答by adanski
I will elaborate on what robodo said in one of the comments above, a really quick and good looking and what is more important, responsive (not fixed height) approach that does not involve any hacks is to use flexbox. If you're not limited by browsers support it's a great solution.
我将详细说明 robodo 在上述评论之一中所说的内容，这是一种非常快速且美观的方法，更重要的是，不涉及任何 hack 的响应式（非固定高度）方法是使用 flexbox。如果您不受浏览器支持的限制，这是一个很好的解决方案。
HTML
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Browser support can be checked here: http://caniuse.com/#feat=flexbox
浏览器支持可以在这里检查：http: //caniuse.com/#feat=flexbox
More common problem solutions using flexbox: https://github.com/philipwalton/solved-by-flexbox
使用 flexbox 的更常见问题解决方案：https: //github.com/philipwalton/solved-by-flexbox
回答by Iakovos Ouranos
In case your html has the (rough) structure:
如果您的 html 具有（粗略）结构：
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
then the simplest css that fixes footer to the bottom of your screen is
那么将页脚固定到屏幕底部的最简单的 css 是
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... where the height of the footer is 80px. calccalculates the height of the wrapper to be equal to the window's height minus the height of the footer (80px) which is out of the .wrapper
...页脚的高度为 80px。calc计算包装器的高度等于窗口的高度减去页脚的高度 (80px).wrapper
回答by Amir Emad Mahmodpor
easily set
轻松设置
position:absolute;
bottom:0;
width:100%;
to your .footer
到你的 .footer
just do it
去做就对了
回答by MichaelJTaylor
Since it's in bootstrap 3, the site will be using jQuery. So the solution could also be the following, instead of trying to play with complex CSS:
由于它在引导程序 3 中，该站点将使用 jQuery。因此，解决方案也可能如下，而不是尝试使用复杂的 CSS：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
A different take on it, hope it helps.
换个角度看，希望有帮助。
Kind regards.
亲切的问候。
回答by Charles Ingalls
Not sure what you have tried so far, but its pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview
不确定您到目前为止尝试过什么，但它非常简单。只需这样做：http: //plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
