移动端区块重叠及Footer定位异常问题排查与方案请求

一、services_offered与description区块重叠问题 #

可能原因 #

• 区块使用absolute/fixed定位脱离正常文档流，导致布局重叠
• 区块内元素浮动未清除，父容器高度塌陷引发排版错乱
• 移动端未设置box-sizing: border-box，元素padding/border超出容器宽度导致溢出重叠
• 不合理的负margin设置导致区块偏移重叠

优化方案 #

1. 修正定位方式：将两个区块的position属性改为relative（默认值），确保它们在正常文档流中依次排列
2. 清除浮动：给两个区块添加清除浮动样式，避免父容器高度塌陷：

.services_offered::after, .description::after {
  content: "";
  display: table;
  clear: both;
}

3. 适配移动端宽度：统一设置区块宽度与盒模型，防止溢出：

.services_offered, .description {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem; /* 可根据需求调整内边距大小 */
}

4. 检查并移除负margin：若区块设置了负margin，改为合理正值或直接删除

二、Footer未固定在页面底部问题 #

可能原因 #

• 页面根容器（body）未设置最小高度，无法撑满视口
• Footer未使用合适布局方式占据底部位置
• 主内容区未占满剩余空间，导致Footer随内容高度变化偏移

优化方案 #

方法1：Flexbox布局（推荐，兼容性好）

通过Flexbox让主内容区自动填充剩余高度，Footer固定在底部：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0; /* 清除body默认外边距 */
}

/* 主内容容器（services_offered与description的父容器） */
.main-content {
  flex: 1; /* 占据剩余所有可用高度 */
}

footer {
  flex-shrink: 0; /* 禁止Footer被压缩 */
  width: 100%;
  box-sizing: border-box;
  /* 可添加自定义样式，比如背景色、内边距 */
  background-color: #f5f5f5;
  padding: 1.2rem;
}

方法2：绝对定位（兼容旧版浏览器）

通过绝对定位将Footer固定在视口底部，同时给body设置padding避免内容被遮挡：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 90px; /* 值等于Footer的高度，防止内容被Footer覆盖 */
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px; /* 设置Footer固定高度 */
  box-sizing: border-box;
  background-color: #f5f5f5;
  padding: 1.2rem;
}

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