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

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

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>添加页边距，因为所有内容都在其中:)

编辑

经过一会儿的回顾，如果不考虑更大的屏幕和更高的高度，上面的解决方案就足够了...

问题在于中间容器本身无法填充整个空间，从而使页脚出现在中间。

因此，解决方案是通过以下方法将同一中间容器的高度调整为窗口的高度，而不是对页脚使用position: absolute或fixed position: absolute （甚至对<body> ）：

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

将中间容器的高度设置为窗口的高度，删除上部容器和页脚的高度，将页脚放置在正确的位置。

同样对于页脚本身，此规则也很方便： footer{overflow: hidden} ，以防页脚的内容/内部间距使之溢出。

Answer 2

在getbootstrap.com网站的入门部分中有一个HOWTO： http ://getbootstrap.com/examples/sticky-footer/

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-10-22 12:42:21

编辑

解决方案2
1 2015-10-22 12:41:09

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-10-22 12:42:21

编辑

解决方案2 1 2015-10-22 12:41:09

解决方案1
3 已采纳 2015-10-22 12:42:21

解决方案2
1 2015-10-22 12:41:09