尝试使用 CSS 粘页脚时无法在移动设备中滚动

Posted 2023-03-21

【中文标题】尝试使用 CSS 粘页脚时无法在移动设备中滚动

【英文标题】：Unable to scroll in mobile with attempt at CSS sticky footer

【发布时间】：2021-04-28 02:33:59

【问题描述】：

我正在开发 this site 并且不知道为什么，当我尝试为滚动页面（例如链接页面）生成粘性页脚时，它不会在移动设备上滚动（在 iPhone 上测试Safari 和 DuckDuckGo）。我的目标是添加一个粘性页脚，使页脚始终位于页面底部（而不是始终位于视口底部）。

我尝试使用fixed、absolute 或relative 更改页脚的位置。对于fixed，它将滚动，但页脚停留在视口最初所在的底部。后两者都导致无法在移动设备中滚动屏幕。但是，使用移动设备（即 iphone）的 Chrome 开发人员工具会产生所需的行为）。我尝试过各种教程，包括this one on sticky footers。

我目前的页脚格式是这样的，

.site-footer 
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: white;

通过修改几个参数的移动响应设置，

.site-footer 
    position: relative;
    margin-bottom: 20px;

我意识到这不是一个完整的最小可重现示例，但我正在努力生成足够便携的东西以在此处分享。谢谢。

【参考方案1】：

删除此代码，您将获得粘性；）

@media only screen and (max-width: 600px)
@media only screen and (min-width: 300px) and (max-width: 767px) 
  .site-footer 
    position: relative;
    margin-bottom: 20px;
  

【讨论】：

这会产生一个页脚，该页脚在页面加载时位于视口的底部，但它会保持在页面上的该位置/高度，以便向上滚动（请参阅根据您的建议更新的页面）。这不是我对粘性页脚的理解。据我所知，它也不能解决无法滚动的问题。谢谢