Question

如何制作跨越整个屏幕宽度的页脚（尽管有屏幕分辨率）并停留在页面底部？

当我搜索这个时，我会让人们提供粘性页脚的代码（与页面一起移动的页脚），并说使用绝对定位（我听到的是否定的）。

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

Answer 1

如果您使用的是bootstrap，此示例将说明如何执行此操作。该名称在网站上具有误导性，但如果内容不多，则会停留在页面底部。如果有很多内容，它也会向下移动页面（所以不坚持）。

页脚：

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>

如何在Bootstrap中创建一个非粘性页脚？

3 个答案: