如何创build与Bootstrap 3兼容的粘性页脚
有或没有顶级的导航，网站有一个粘性页脚是非常普遍的。 Bootstrap有一个设备可以轻松地创build固定的页脚，但是没有创build粘性页脚的设备 – 这是一个很大的区别。
谷歌search这个问题将揭示数百人，如果不是成千上万的开发者有相同的问题，但没有很好的答案。
具有讽刺意味的是， 引导文档页面本身有一个粘性的脚注，引导样式和一个固定的顶级导航栏。 这是所有的自定义CSS虽然，而不是框架的一部分。 所以一个显而易见的路线是采取和重构他们的自定义样式，因为它明显地在Bootstrap框架内运行良好，但是这似乎比它应该更痛苦。
看到这个plunkr的示例页面，带有Bootstrap顶部导航栏，以及一个不受欢迎的，不粘的页脚。
问题：
（感谢Softlayer – 为graphics ）
期望的解决scheme：
当然，页脚应该是响应式和跨浏览器友好的
Schmalzy指出，答案可以在getbootstrap网站的示例部分find。
但是这个例子不包括顶级导航。 对于粘着页脚的固定顶部导航，请参阅下面的代码或代码。
样式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的：
<!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>
依靠固定高度页脚的粘性页脚解决scheme在响应式方法（页脚高度经常在不同的中断点处变化）中不受欢迎。 我见过的最简单的响应式粘页脚解决scheme涉及在顶级容器上使用display: table ，例如：
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
最好的办法是做到以下几点：
HTML： 粘滞页脚
CSS： 粘滞页脚的CSS
HTML代码示例：
<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代码示例：
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; }
另一个小小的调整可能会使它更完美（取决于你的项目），所以它不会影响移动视图的页脚。
@media (max-width:768px){ .footer{position:absolute;width:100%;} } @media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
我一直在寻找一个简单的方法来使粘性页脚工作。 我刚刚应用了一个class="navbar-fixed-bottom ”，它立即起作用。唯一要记住的是调整移动设备的页脚设置。 干杯!
对于那些正在寻找一个轻松的答案，你可以从这里得到一个简单的工作示例：
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 */ }
只需在body的margin-bottom添加内容和页脚之间的空间。
我将详细说明robodo在上述评论中所说的内容，一个非常快速和好看，更重要的是，不涉及任何黑客行为的响应（而不是固定高度）方法是使用flexbox。 如果你不受浏览器支持，这是一个很好的解决scheme。
HTML
<body> <div class="site-content"> Site content </div> <footer class="footer"> Footer content </footer> </body>
CSS
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .site-content { flex: 1; }
浏览器支持可以在这里检查： http : //caniuse.com/#feat=flexbox
使用flexbox更常见的问题解决scheme： https ： //github.com/philipwalton/solved-by-flexbox
不知道你到目前为止所尝试的，但它很简单。 只要做到这一点： http : //plnkr.co/edit/kmEWh7?p=preview
html, body { height: 100%; } footer { position: absolute; bottom: 0; }
由于它是在引导3，该网站将使用jQuery。 所以解决scheme也可以是以下，而不是试图玩复杂的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>
不同的承担，希望它有帮助。
亲切的问候。
轻松设置
position:absolute; bottom:0; width:100%;
给你的.footer
去做就对了
什么对我来说是添加相对于HTML标签的位置。
html { min-height:100%; position:relative; } body { margin-bottom:60px; } footer { position:absolute; bottom:0; height:60px; }
如果你的html有（粗糙的）结构：
<div class="wrapper"> <div>....</div> ... <div>....</div> </div> <div class="footer"> ... </div>
那么最简单的CSS修复页脚底部的屏幕是
html, body { height: 100%; } .wrapper { min-height: calc(100vh - 80px); } .footer { height: 80px; }
…页脚的高度是80px。 calc计算包装的高度等于窗口的高度减去footer（80px）的高度，该高度不在.wrapper
<style type="text/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 !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: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; } .container .credit { margin: 20px 0; } </style> <div id="wrap"> <!-- 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.html">the sticky footer</a> with a fixed navbar if need be, too.</p> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="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>
