使用 Bootstrap 3 使页脚保持在底部答案

【问题标题】：Making footer stay at bottom with Bootstrap 3使用 Bootstrap 3 使页脚保持在底部
【发布时间】：2016-01-21 17:43:42
【问题描述】：

我正在尝试让页脚保持在底部。我通过谷歌搜索过，但我的代码没有运气。我试过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;
            }

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

【问题讨论】：

使用“位置：固定”
提问前总是先搜索
@LaljiTadhani 我不希望它被修复，如帖子中所述。我试过navbar-fixed-bottom
www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
@LaljiTadhani 链接已损坏

标签： html css twitter-bootstrap-3 footer sticky-footer

【解决方案1】：

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

【讨论】：

他不想要一个粘性页脚，他只想让页脚留在页面底部。
@Armfoot - 这就是粘性页脚的定义，不是吗？
@MrMarlow 我同意你的观点，但我之前使用的粘性插件实际上将元素与position: fixed 粘贴在一起，OP 的目标是避免这种情况。 Matthew 的链接在检查后似乎只使用了 position:absolute...

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

编辑

经过一段时间的审查，如果不考虑更高高度的更大屏幕，上面的解决方案就足够了......

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

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

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

将中间容器的高度设置为窗口的高度，去掉上面的容器和页脚的高度，将页脚置于正确的位置。

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

【讨论】：

正是，我在寻找什么！ :) 谢谢！
在 Firefox 上，页脚看起来不错，但在 Chrome 和 Safari 上却不行。有什么方法可以为 Chrome 设置样式，使其保持在底部？
请查看此链接：prntscr.com/8u279i 这是在 Chrome 上。这会通过更改为10px 0 0 5px 和overflow: hidden 来解决问题吗？
我尝试添加overflow: hidden，但在 Chrome 和 Safari 上，页脚仍然不在底部，它在中间。您可以通过帖子中的链接查看。
让我们continue this discussion in chat。