Question

我试图让页脚停留在底部。我通过谷歌搜索过，但我的代码没有运气。我已经尝试了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;
}

然后你可以通过向底部添加负值来确保它始终存在。 E.g：

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}，以防页脚的内容/内部间距溢出。

Answer 2

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

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

2 个答案:

修改