使用 Bootstrap 3 使页脚停留在底部

Question

我正在尝试让页脚保持在底部。我搜索了 Google，但没有找到我的代码。我试过 navbar-fixed-bottom，但这只会让页脚内容在其下方滚动，并且保持固定，这是我不想要的。

这是我当前的代码：

HTML

        <footer>
          <div class="container">
            <p class="text-p"><img src="images/footer-logo.png"> © 2015 <a href="http://www.domainname.no">Domainname.no</a>. All rights reserved.
            <!--<a href="https://www.facebook.com/Helsespesialisten-448789105236638/" target="_blank"><i class="fa fa-facebook"></i>Follow us on Facebook</a>-->
          </div>
        </footer>

CSS

            footer {
              position: absolute;
              bottom: 0;
              width: 100%;
              /* Set the fixed height of the footer here */
              height: 60px;
              background-color: #f5f5f5;
            }

            .text-p{
                text-shadow: none;
                font-size: 14px;
                color: #999;
                padding: 20px 0 0 5px;
            }

如有任何帮助，我将不胜感激！如果您需要其余代码，请告诉我。

Answer 1

getbootstrap.com 站点上有一个 HOWTO，在入门部分： http://getbootstrap.com/examples/sticky-footer/

Answer 2

你快到了，它缺少的一件事是设置父级的相对位置：

body {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 50px;
    margin-top: 0;
    position: relative;
}

然后您可以通过向底部添加负值来确保它始终保持在那里。例如：

footer {
    background-color: #f5f5f5;
    bottom: -100px;
    height: 60px;
    position: absolute;
    width: 100%;
}

顺便说一句，您不需要为 <body> 添加边距，因为所有内容都在其中 :)

编辑

看了一会儿，如果不考虑大屏高的，上面的方案就够了...

问题是中间容器本身没有填满整个 space，导致页脚出现在中间。

因此，不是使用 position: absolute 或 fixed 作为页脚（甚至 <body>），解决方案是将同一个中间容器的高度调整为window 的高度：

<script>
  $('body>.container').height(
    $(window).height()-
    $('body>.container-fluid').height()-
    $('body>footer').height()
  );
</script>

将中间容器的高度设置为 window 的高度，移除上部容器和页脚的高度，将页脚置于正确的位置。

对于页脚本身，这条规则也派上用场：footer{overflow: hidden}，以防页脚的 contents/inner 间距溢出它。

使用 Bootstrap 3 使页脚停留在底部

Making footer stay at bottom with Bootstrap 3

html

css

footer

sticky-footer

twitter-bootstrap-3

编辑