Twitter Bootstrap 3 Sticky Footer

我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!

我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?

当前回答

以下是我对这个问题的最新解决方案。

 /* 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-08 03:12:58

其他回答

这是一个非常简单和干净的粘性页脚，你可以在bootstrap中使用。完全响应!

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 Demo

2015-10-24 23:48:52

参考官方的Boostrap3粘性页脚示例，没有必要添加<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>

您可以在粘脚示例的源代码中找到这个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-16 13:08:10

这个棘手的例子对我不适用。我的解决方案:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}

2014-05-08 09:13:56

你可以简单地尝试在页脚导航栏上添加一个类:

navbar-fixed-bottom

然后创建一个CSS命名为custom.css和body padding像这样..

body { padding-bottom: 70px; }

2016-08-23 06:46:52

推div应该在包装后，而不是在..就像这样

<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-28 22:48:48

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签