移动端100%缩放时Footer不显示，仅50%缩放可见如何解决

问题根因 #

你遇到的移动端看不到页脚的问题，核心是全局容器的高度和滚动属性配置错误，和你提供的footer本身的HTML、CSS代码无关：

• 你给html、body元素设置了固定高度height:100%/height:100vh，同时开启了overflow-y:hidden，导致超出视口高度的内容被直接截断，页脚刚好在截断区域外。100%缩放时页面整体高度大于视口，就看不到页脚；缩放到50%时整体内容高度缩小到视口范围内，就能正常显示。

修复方案 #

1. 修改全局html、body的高度和滚动配置
   找到你全局CSS里的html、body样式规则，修改成如下内容：

html, body {
  /* 把固定高度改成最小高度，允许页面内容撑开高度 */
  min-height: 100vh;
  overflow-x: hidden;
  /* 删除掉原有的overflow-y:hidden配置，保留默认的auto允许纵向滚动 */
}

2. （可选）优化移动端页脚内边距
   你当前给footer设置的上下140px内边距在移动端占比过高，可以加媒体查询适配小屏：

@media (max-width: 768px) {
  footer {
    padding: 70px 0;
  }
}

3. （可选）配置粘性页脚
   如果需要实现页脚永远贴在页面底部（内容少时贴视口底，内容多时跟在内容末尾），可以加如下配置：

body {
  display: flex;
  flex-direction: column;
}
/* 把下面的类名替换成你页面主内容外层容器的类名 */
.main-content {
  flex: 1;
}

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