移动端页面页脚设置求助：调整DOM位置后页脚仍消失

针对移动端页脚消失或无法正常显示的问题，给你几个实用的解决思路：

1. 固定在页面底部（不随滚动移动） #

用CSS的position: fixed实现，注意给body添加内边距避免内容被页脚遮挡：

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px; /* 根据需求自定义高度 */
  background-color: #fff;
  box-sizing: border-box; /* 避免内边距/边框撑宽元素 */
}

body {
  padding-bottom: 60px; /* 值与页脚高度保持一致 */
}

2. 随内容滚动后贴底（内容不足时仍在底部） #

如果希望页脚在内容较短时贴在页面底部，内容较长时随滚动到页面底部，用flex布局实现：

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1; /* 让主内容区域占满剩余空间 */
}

.footer {
  height: 60px;
  background-color: #fff;
}

对应的DOM结构示例：

<div class="wrapper">
  <div class="main-content">页面主要内容</div>
  <footer class="footer">页脚内容</footer>
</div>

3. 排查页脚消失的常见原因 #

• 检查父容器是否设置了overflow: hidden，可能导致页脚被裁剪
• 确认页脚的z-index值，是否被其他层级更高的元素覆盖
• 检查移动端媒体查询规则，是否有CSS在移动端将页脚设置为display: none

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