Twitter Bootstrap 3 Sticky Footer

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

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

当前回答

我写我的简化粘脚代码与填充使用LESS。这个答案可能离题了，因为这个问题没有谈到填充，所以如果你有兴趣，可以查看这篇文章了解更多细节。

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}

2015-01-03 21:17:24

其他回答

我想要一个灵活的粘性页脚，所以我才来这里。最重要的答案让我找到了正确的方向。

当前(10月16日2日)Bootstrap 3 css Sticky footer(固定大小)看起来像这样:

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;
}

只要页脚的大小是固定的，body margin-bottom就会产生一个推力，让页脚可以坐进去。在本例中，两者都设置为60px。但如果页脚不是固定的，高度超过60px，它将覆盖你的页面内容。

使灵活:删除css正文边距和页脚高度。然后添加JavaScript来获取页脚高度，并设置body的marginBottom。这是通过setfooter()函数完成的。接下来添加事件监听器，用于页面第一次加载和调整大小时运行setfooter。注意:如果你的页脚有一个手风琴或其他触发大小变化的东西，而没有调整窗口的大小，你必须再次调用setfooter()函数。

运行代码片段，然后全屏演示。

2016-10-03 01:49:44

使用flexbox是我从CSS-tricks的人那里找到的最简单的方法。这是真正的sticky-footer，它在内容< 100%页面和> 100%页面时工作:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

和CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

请注意，这是bootstrap-不可知论的，所以它可以使用bootstrap，也可以不使用bootstrap。

2017-01-14 08:35:06

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

 /* 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

这个问题已经被flexbox彻底解决了:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

2017-08-28 13:13:17

推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

推荐文章

最新文章

标签