Twitter Bootstrap 3 粘性页脚

J

Jon

只需将类 navbar-fixed-bottom 添加到您的页脚。

<div class="footer navbar-fixed-bottom">

这与粘性页脚不同

如果您有页眉和页脚，则会在移动设备上失去太多空间。

@strattonn 这就是媒体查询的用途

如果页面不需要滚动，这非常有效。但是页脚与页面上的更多内容重叠。有什么解决方法吗？谢谢！

不确定重叠问题，但添加边距/填充不能解决问题吗？

B

BenG

参考官方的Boostrap3 Sticky footer示例，无需添加<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>

您可以在 sticky-footer example 的源代码中找到此 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

官方sticky-footer 示例中的HTML 和CSS 现在与这里描述的完全不同，例如不再使用'wrap' div。

a

anataliocs

这是一种添加粘性页脚的方法，除了 Bootstrap 中已有的内容之外，不需要任何额外的 CSS 或 Javascript，并且不会干扰您当前的页脚。

此处示例：Easy Sticky Footer

只需将其复制并直接粘贴到您的代码中即可。不要大惊小怪。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

非常好，很快。也可以反应灵敏。但是需要在页面内容的底部添加一些额外的空间，这样它就不会被页脚隐藏。该空间的高度应等于页脚高度。你能展示如何最好地做到这一点吗？顺便说一句，“不需要任何 CSS”在技术上是错误的。它应该是“除了 Bootstrap 类之外不需要任何额外的 CSS”。

我喜欢这利用了引导程序中现有的东西。我无法获得其他最佳答案，但将其粘贴在我的页面和粘滞页脚中。谢谢！

m

mb21

除了刚刚添加的css，记得需要在关闭wrap div之前添加push div

HTML的基本结构是

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Live view
Edit view

如果页面内容大于可用显示，页脚将被下推。我希望页脚真正粘在底部（如 navbar-fixed-bottom）

嘿@delavnog，这样的东西对你有用吗？ codepen.io/panchroma/pen/wMXWpY 。对您来说唯一重要的部分是第 647 行的 HTML 和 CSS

@delavnog，同样的想法，页面 codepen.io/panchroma/pen/JGZKqy 上的内容最少

谢谢，太好了！现在，如果我能让主 div 在导航和页脚之间垂直居中，那就太棒了！编辑了您的代码笔：codepen.io/anon/pen/rxKMaW（我必须在正文中添加边距，因为导航占用了内容的顶部）

@delavnog，如果主体不是太高，这是一个开始。但是对于更长的内容，需要更多的工作：codepen.io/panchroma/pen/vLrXMq

L

Leniel Maccaferri

这是今天的 Sticky Footer simplified code，因为他们一直在优化它，这很好：

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

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

完美的解决方案。这就是我一直在寻找的。

不幸的是，这个页脚的大小是固定的。有时，当页脚是动态的时，它可能大于或小于它在 CSS 中的高度。

i

iMil

我在这个主题上有点晚了，但是我遇到了这篇文章，因为我刚刚被这个问题所困扰，最后找到了一个非常简单的方法来克服它，只需使用启用了 navbar-fixed-bottom 类的 navbar .例如：

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

高温高压

我喜欢您的答案的简单性和有效性，顺便说一句，这是一个明智的答案。同一问题的许多答案都充满了 jquery 和复杂的东西。谢啦。

它是一个解决方案，如果您调整页面大小，您仍然需要注意页面上内容的重叠。

@Baldráni 不，它是一个完整的解决方案，如果您在页脚 html 中使用 Bootstrap 行和 col 重叠工作正常（无论如何您都应该这样做）

这不是一个粘性页脚。它是一个固定底部导航栏，仅适用于导航栏内容，并与页面内容重叠。

z

z atef

这是我对此问题的更新解决方案。

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

这不是一个好的解决方案，因为您的页脚是固定的，这意味着它与页面内容（如果有）重叠。尝试在页脚前添加几行 some text<br> 并缩小窗口。

@user2041318：是的，那太可怕了……感谢您指出这一点。

这已根据 jmarceli 评论得到纠正。页脚不再固定。

K

Kal

粘性示例对我不起作用。我的解决方案：

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

简单，良好的老式 CSS。任务完成。我觉得有趣的是，一些评分较高的答案是多么令人费解。 Bootstrap 不应该让我们的生活更轻松吗？ 😂

I

Igor Ivancha

推送 div 应该在 wrap 之后，而不是在......就像这样

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

C

CodeCaster

OP回答：

将此添加到您的 CSS 文件中。

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: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

S

Sterner

我想要一个灵活的粘性页脚，这就是我来这里的原因。热门答案让我朝着正确的方向前进。

当前（16 年 10 月 2 日）Bootstrap 3 css Sticky 页脚（固定大小）如下所示：

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 以获取页脚高度并设置正文 marginBottom。这是通过 setfooter() 函数完成的。接下来添加事件侦听器，用于页面首次加载和调整运行 setfooter 的大小。注意：如果您的页脚有手风琴或其他任何触发大小更改的东西，而没有调整窗口大小，您必须再次调用 setfooter() 函数。

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

函数 setfooter(){ var ht = document.getElementById("footer").scrollHeight; document.body.style.marginBottom = ht + "px"; } window.addEventListener('resize', function(){ setfooter(); }, true); window.addEventListener('load', function(){ setfooter(); }, true); html {位置：相对；最小高度：100%； } .footer { 位置：绝对；底部：0；宽度：100%； /* 附加样式仅用于效果 */ text-align: center;背景颜色：#333；颜色：#fff; } body{ /* bootstrap 中不需要的效果的附加样式*/ padding:0;边距：0； }

页面内容

line 3

line 5

line 7

K

Konstantin Schubert

这已经被 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;
}

f

fdrv

简单的js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

更新#1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});

k

kshirish

总结所有这些，只要记住一件事，除了页脚之外的所有内容都应该有 min-height: 100% 或更少。

F

Fred K

我使用 LESS 编写了带有填充的简化的粘性页脚代码。这个答案可能是题外话，因为这个问题没有讨论填充，所以如果您有兴趣，请查看 this post 了解更多详细信息。

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

C

Community

基于 Jek-fdrv's answer，我添加了一个 .on('resize', function() 以确保它适用于所有设备和每种分辨率：

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});

C

CJ Catalano

当前版本的引导程序似乎不再适用于此功能。如果您下载他们的sticky-footer-navbar 示例并在主体区域中放置大量内容，则页脚将被向下推到视口底部。它一点也不粘。

t

tao

这是一个基于 CSS 的完全响应式可变高度粘性页脚的解决方案。优点：页脚允许可变高度，因为高度不再需要在 CSS 中硬编码。

身体{显示：-webkit-box；显示：-webkit-flex；显示：-moz-box；显示：-ms-flexbox；显示：弯曲； -webkit-box-orient：垂直； -webkit-box-direction：正常； -webkit-flex-direction：列； -moz-box-orient：垂直； -moz-box 方向：正常； -ms-flex-direction：列；弹性方向：列；最小高度：100vh； } 正文 > * { -webkit-box-flex: 0; -webkit-flex-grow：0； -moz-box-flex：0； -ms-flex-正：0；弹性增长：0； } 正文 > 导航 + .container { -webkit-box-flex: 1; -webkit-flex-grow：1； -moz-box-flex：1； -ms-flex-正：1；弹性增长：1； } /* 重置 CSS 和一些页脚样式。仅在 StackOverflow 上需要 */ body { padding: 50px 0 0;边距：0； } 页脚 { 背景颜色：#f8f8f8;填充：15px 0 5px；边框顶部：1px 实心#e7e7e7； }

你可以使用此 CSS 具有任意高度的粘性页脚。它也是完全响应式的，不需要 JavaScript。

这是未加前缀的 SCSS（用于 gulp/grunt）：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}

k

kentor

只需使用弹性！确保在您的 HTML 中使用 body 和 main ，这是最好的解决方案之一（除非您需要 IE9 支持）。它不需要固定的高度或类似的高度。

这也是 Materialise 的推荐方法！

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

main {
    flex: 1 0 auto;
}

e

equivalent8

用 Haml & Sass 的话来说，这一切都是必要的：

app/view/layouts/application.html.haml 的哈姆尔

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

app/assets/stylesheets/application.css.sass 的 Sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

基于 http://getbootstrap.com/examples/sticky-footer-navbar/

j

jmarceli

如果您想在页脚类中使用引导程序构建。您还应该编写一些javascript：

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

它将防止内容与固定页脚重叠，并在用户更改窗口/屏幕大小时调整 padding-bottom。

在上面的脚本中，我假设页脚直接放在 body 标记内，如下所示：

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

这绝对不是最好的解决方案（因为可以避免使用 JS），但它可以在没有任何重叠问题的情况下工作，它易于实现和响应（height 在 CSS 中没有硬编码）。

G

Gpak

#myfooter{ 高度：3em;背景颜色：#f5f5f5；文本对齐：居中；填充顶部：1em； }

这个底部怎么粘？

P

Peter Girnus

这是一个非常简单且干净的粘性页脚，您可以在引导程序中使用。完全响应！

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

由于绝对定位，此解决方案将在打开引导模式时将页脚栏向右移动！

b

bustawin

使用 flexbox 是我从 CSS-tricks 的人那里找到的最简单的方法。这是真正的粘性页脚，它在内容 << 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;
}

请注意，这是与引导程序无关的，因此它可以与引导程序一起使用，也可以在没有引导程序的情况下使用。

I

Ikram - Ud - Daula

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

navbar-fixed-bottom

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

body { padding-bottom: 70px; }

v

vijoy

html

<footer class="footer navbar-fixed-bottom">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

CSS

.footer {
    position: fixed;
    bottom: 0;
}

您好，欢迎来到 SO！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读 tour 和 How do I write a good answer? 此外，您是否检查过该问题的 25 个其他解决方案中不存在这些解决方案？

Twitter Bootstrap 3 粘性页脚

任意高度的响应式置顶页脚

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

友情链接

联系我们