将 div 粘贴到浏览器窗口的底部答案

【问题标题】：Stick div to bottom of browser window将 div 粘贴到浏览器窗口的底部
【发布时间】：2017-09-18 15:04:13
【问题描述】：

我有一个 div，我想贴在浏览器窗口的底部（实际的浏览器窗口而不是页面）。用户滚动时，div 需要停留在浏览器窗口的底部。

现在，div 会在第一个初始滚动时粘在窗口底部，但不会在每次有新滚动时重新定位。这是我的 jQuery 的内容：

$(window).scroll(function () { 
    var bHeight = $(window).height();
    $('.test').css({
        top: bHeight - 77 + 'px'
    });
});

这是一个 jsfiddle http://jsfiddle.net/3ecx7zp9/1/

【问题讨论】：

您不应该将 jQuery 或 Javascript 用于 CSS 可以默认处理的事情。

标签： javascript jquery html css

【解决方案1】：

这可以简单地在 CSS 中完成。删除所有 JavaScript，然后执行以下操作：

position: fixed;
bottom: 77px;

Fiddle

【讨论】：

哇，这种疏忽太尴尬了！谢谢你的帮助哈哈。
有时我们太全神贯注于使用先进的技术而忘记了已经有一个基本的技术了..
这也是我一直在使用的，但是在移动设备上它会在上下滚动时起作用。
根据具体情况使用position: sticky; 可能会产生更好的结果。

【解决方案2】：

您是否考虑过使用固定位置的 div？设置position: fixed 和bottom: 77px

但是，如果您必须使用 jQuery 解决方案，请将您的代码更改为此

$(window).scroll(function () { 
    var bHeight = $(window).height();
    var offset = $(window).scrollTop();
    $('.test').css({
        top: bHeight + offset - 77 + 'px'
    });
});

http://jsfiddle.net/3ecx7zp9/6/

这会考虑到您滚动了多远，并将相应地设置 div 的位置

【讨论】：

【解决方案3】：

在您的 CSS 中使用 position: fixed; 而不是 position: absolute;。

http://jsfiddle.net/3ecx7zp9/4/

【讨论】：

【解决方案4】：

您要使用position: fixed; 吗？

https://jsfiddle.net/js7tadve/1/

【讨论】：

【解决方案5】：

给你：

 &lt;div class="test" style="position: fixed; width: 100%; height: 77px; background-color: #333;left:0;bottom:0"&gt;&lt;/div&gt;

【讨论】：

【解决方案6】：

这正是 position: fixed 的设计目的：

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

这是小提琴：http://jsfiddle.net/uw8f9/

【讨论】：

目前为止在 html 上粘页脚类型的最佳解决方案。 width:100% 是必需的。

【解决方案7】：

检查以下链接是否对您有用。

Fiddle

#footer {
position: fixed;
bottom: 0;
height: 77px;
width: 100%;
background-color: #333;
}

【讨论】：