如何解决尝试使用 CSS 粘性页脚无法在移动设备中滚动
我正在开发 this site 并且不知道为什么当我尝试为滚动页面(例如链接的页面)生成粘性页脚时,它不会在移动设备上滚动(在移动设备上测试) Safari 和 DuckDuckGo 中的 iPhone)。我的目标是添加一个粘性页脚,使页脚始终位于页面底部(而不是始终位于视口底部)。
我曾尝试使用 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;
}
我意识到这不是一个完整的最小可重复示例,但我正在努力生成足够便携的东西以在此处分享。谢谢。
解决方法
删除此代码,您将获得粘性 ;)
@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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。