移动端设置overflow-x:hidden后页脚覆盖内容且无法垂直滚动如何修复？

1. 修复移动端垂直滚动失效问题 #

你同时给html和body设置overflow-x: hidden，再搭配body { position: relative }，可能干扰了移动端的垂直滚动触发逻辑。调整CSS如下：

<style>
  html {
    overflow-x: hidden;
  }
  body {
    position: relative;
    overflow-x: hidden;
    margin: 0; /* 清除默认边距，避免额外横向溢出 */
    min-height: 100vh; /* 确保body至少占满视口高度，保证滚动空间 */
  }
</style>

只保留必要的横向溢出限制，通过min-height:100vh确保页面内容高度足够触发垂直滚动，清除默认边距避免潜在的横向溢出隐患。

2. 解决页脚覆盖内容/返回按钮的问题 #

你的页脚使用position: fixed会脱离文档流固定在底部，必然会覆盖下方内容。解决核心是给页面主内容区（或body）添加与页脚高度一致的底部内边距：

方法一：给body添加底部内边距 #

修改body的CSS规则：

body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  min-height: 100vh;
  padding-bottom: 65px; /* 数值与页脚height保持一致 */
}

方法二：给主内容容器添加底部内边距（推荐） #

如果页面内容都放在独立容器（比如<main>）中，直接给容器加内边距：

main {
  padding-bottom: 65px;
}

另外建议把页脚的内联样式提取到CSS中，便于后续维护：

.footer {
  text-align: center;
  height: 65px;
  line-height: 30px;
  background-color: #7895B2;
  position: fixed;
  width: 100%;
  bottom: 0;
}
.footer p {
  color: #F5EFE6;
  margin: 0; /* 清除p标签默认边距，避免页脚高度超出设定值 */
}

对应的页脚HTML简化为：

<div class="footer">
  <p>Developed by Kelompok 2<br>Aldi, Raja, Yovan</p>
</div>

内容的提问来源于stack exchange，提问作者yovanherkusuma