css - 如何在 Bootstrap 中创建非粘性页脚？

Question

如何生成跨越整个屏幕宽度（尽管屏幕分辨率）并保持在页面底部的页脚？

当我搜索这个时，我让人们为粘性页脚（与页面悬停的页脚）提供代码，并说使用绝对定位（我听说这是不可以的）。

我的意思的一个完美例子是 twitter bootstrap 引用的网站之一（https://www.gathercontent.com/）。在该站点上，页脚（看起来像英雄单位或其他东西）始终位于页面底部。

Answer 1

如果您使用的是引导程序，此示例将展示您如何做到这一点。该名称在网站上具有误导性，但如果内容不多，它会保留在页面底部。如果有很多内容，它也会向下移动页面（所以不会粘住）。

页脚：

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

CSS：

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css

确保不要忘记

html {
 position: relative;
 min-height: 100%;
}

Answer 2

使用这个jQuery：

$(window).load(function () {
    $('.footer').width($(window).width());
    $(window).resize(function () {
        $('.footer').width($(window).width());
    });
});

确保你有一个 js 文件

Answer 3

我正在寻找类似的东西，因为我不希望页脚悬停。页脚阻止了小型移动设备上的下拉菜单元素。我所做的只是从页脚类中删除“navbar-fixed-bottom”。

我变了

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

至

<div class = "footer"></div>