如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

Posted

技术标签:

【中文标题】如何创建一个与 Bootstrap 3 配合得很好的粘性页脚【英文标题】：How to create a sticky footer that plays well with Bootstrap 3 【发布时间】：2013-11-14 10:31:33 【问题描述】：

无论有没有顶部导航，网站都有一个粘性页脚是很常见的。 Bootstrap 具有轻松创建固定页脚的功能，但没有这样的功能来创建粘性页脚 - 有很大的不同。

在谷歌上搜索这个问题会发现成百上千的开发者有同样的问题，但没有好的答案。

具有讽刺意味的是，Bootstrap documentation 页面本身有一个粘性页脚以及引导样式和一个固定的顶部导航栏。不过，这都是自定义 css，而不是框架的一部分。因此，一条明显的路线是采用并重构他们的自定义样式，因为它显然在 Bootstrap 框架中运行良好，但这似乎比它应该的更痛苦。

请参阅 this plunkr 以获取带有 Bootstrap 顶部导航栏和不受欢迎的非粘性页脚的示例页面。

问题：

（感谢 Softlayer - graphics）

所需的解决方案：

当然，页脚应该是响应式的和跨浏览器友好的......

【问题讨论】：

您是否真的尝试过使用文档或example\template？如果是这样，请发布您的代码... @Schmalzy - 谢谢，这有帮助。我从您上面链接到的示例创建了一个 plnkr。 plnkr.co/edit/4OH2ZL?p=preview 【参考方案1】：

如果您的 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;

... 页脚高度为 80 像素。 calc 计算包装器的高度等于窗口的高度减去页脚的高度（80px），它超出了.wrapper

【讨论】：

【参考方案2】：

对我有用的是添加相对于 html 标记的位置。

html 
  min-height:100%;
  position:relative;

body 
  margin-bottom:60px;

footer 
  position:absolute;
  bottom:0;
  height:60px;

【讨论】：

【参考方案3】：

我将详细说明 robodo 在上面的其中一个 cmets 中所说的内容，一种非常快速且美观的方法，更重要的是，不涉及任何 hack 的响应式（非固定高度）方法是使用 flexbox。如果您不受浏览器支持的限制，这是一个很好的解决方案。

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的常见问题解决方案：https://github.com/philipwalton/solved-by-flexbox

【讨论】：

【参考方案4】：

对于那些正在寻找简单答案的人，您可以获得一个简单的工作示例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 */

只需使用body 的margin-bottom 即可在内容和页脚之间添加空格。

【讨论】：

【参考方案5】： 
   <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>

【讨论】：

【参考方案6】：

我一直在寻找一种使粘性页脚起作用的简单方法。 我刚刚申请了class="navbar-fixed-bottom"，它立即生效 唯一要记住的是调整移动设备的页脚设置。 干杯！

【讨论】：

【参考方案7】：

轻松设置

position:absolute;
bottom:0;
width:100%;

到你的 .footer

去做吧

【讨论】：

【参考方案8】：

最好的方法是执行以下操作： HTML:Sticky Footer CSS：CSS for Sticky Footer 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) .footerposition:absolute;width:100%; 
@media (min-width:768px) .footerposition:absolute;bottom:0;height:60px;width:100%;

【讨论】：

将position: relative 替换为position: fixed 以在向下滚动时将其保持在底部【参考方案9】：

由于它在 bootstrap 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>

不同的看法，希望对你有所帮助。

亲切的问候。

【讨论】：

【参考方案10】：

依赖于固定高度的页脚的粘性页脚解决方案在响应式方法（页脚的高度经常在不同的断点处发生变化）已经失宠。我见过的最简单的响应式粘页脚解决方案是在***容器上使用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/

【讨论】：

显示：表是要走的路【参考方案11】：

正如 Schmalzy 所指出的，答案可以在 getbootstrap 网站的示例部分中找到 here。

但该示例不包括顶部导航。对于带有粘性页脚的固定顶部导航，请参阅this plnkr，或以下代码。

样式 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;

索引.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>

【讨论】：

任何人都有这个工作的问题，但只有在页面上向下滚动 时？很奇怪。 此页脚没有响应！请参阅答案***.com/a/23833625/1647737 以获得完全响应的解决方案。 如果你可以使用 flexbox 我建议你试试这个链接：philipwalton.github.io/solved-by-flexbox/demos/sticky-footer【参考方案12】：

不确定到目前为止您尝试过什么，但它非常简单。只需这样做：http://plnkr.co/edit/kmEWh7?p=preview

html, body 
  height: 100%;


footer 
  position: absolute;
  bottom: 0;

【讨论】：

谢谢，这可行，但并不涵盖所有情况。例如，垂直缩小视口，并查看页脚在段落文本之间移动。 当然可以！你想要一个粘性页脚，所以它会粘在底部，如果你缩小视口，它会覆盖文本。这就是为什么您必须将包含您的内容的 div 设置为溢出：auto;并给它一个至少等于页脚高度的底部填充。 @CharlesIngalls 这样一个错误的答案。问题是关于粘性页脚的，这个答案并没有结束。

以上是关于如何创建一个与 Bootstrap 3 配合得很好的粘性页脚的主要内容，如果未能解决你的问题，请参考以下文章

让引导程序的按钮收音机与 Rails UJS（数据远程）配合得很好？

WCF 是不是与 Java 配合得很好？

RemoteIO 的 AudioSession 设置与 iPod 配合得很好

让 Emacs 填充段落与类似 javadoc 的注释配合得很好

ios 包 ipa 与 Debug 配合得很好，但在发布时出现了一些错误

iphone4s 模拟器上的 Swift UI 测试失败与其他模拟器配合得很好