Bootstrap父子孙元素相对定位场景下移动端页脚定位异常问题求解

问题核心原因 #

position: absolute 会让元素脱离正常文档流，父容器 .fz-wrap 的高度仅由内部的大图片高度决定，完全不会计算绝对定位的 .fz-brand-band 高度。小屏场景下你把展示条挪到 top:100% 之后，展示条完全在父容器的可视范围外，父容器高度还是只有图片高度，后面的页脚自然只会跟在父容器底部，和展示条出现重叠或者空隙。

最优解决方案 #

小屏场景下直接取消 .fz-brand-band 的绝对定位，改成默认的静态定位，这样父容器就会把展示条的高度正常纳入高度计算，页脚会自动跟在展示条后面，完全不需要手动调整定位。

修改后的CSS代码 #

.fz-brand-band {
  position: absolute; 
  top: 0; 
  background-color: rgba(180, 225, 180, 0.4);
}

.fz-wrap {
  overflow: hidden;
}

@media (max-width: 768px) {
  .fz-wrap {
    overflow: visible;
  }
  .fz-brand-band {
    /* 取消绝对定位，回归正常文档流 */
    position: static;
  }
}

适配效果 #

• 大屏设备：展示条依然浮在大图片上方，原有交互不变
• 小屏设备：展示条自动排在大图片下方，父容器高度自动适配「图片高度+展示条高度」，后续页脚自然跟在展示条底部，不会出现重叠或者多余空白

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