Bootstrap响应式Footer堆叠时背景色不一致问题解决咨询

你遇到的核心问题是固定高度限制了Footer容器的可扩展性：你给#footer设置了height:200px，在大屏/中屏时内容高度刚好适配这个值，panel-footer的背景能完全覆盖；但小屏设备上，col-sm-4的区块会垂直堆叠，内容总高度超过200px，超出部分就会露出body的背景色，因为panel-footer的背景只覆盖了固定高度的容器范围。

具体解决方案 #

1. 移除固定高度，让Footer自适应内容

把CSS中固定高度的设置替换为自适应的最小高度，确保背景色能完整覆盖所有内容：

/* 替换原来的#footer样式 */
#footer { 
  min-height: 200px; /* 保留最小高度，避免内容过少时Footer过矮 */
  padding: 1.5rem 0; /* 可选：增加上下内边距，优化内容排版 */
}

2. 修复HTML标签闭合问题（避免布局异常）

你的#address区块里有未闭合的<p>标签，补上闭合标签防止布局错乱：

<section id="address" class="col-sm-4">
  <span>Address:</span><br>
  7105 Reisterstown Road<br>
  Baltimore, MD 21215
  <p>* Delivery area within 3-4 miles</p> <!-- 补全内容并闭合标签 -->
</section>

为什么这样有效？ #

• 固定的height会强制容器保持200px高度，内容超出后会溢出容器，溢出部分无法被panel-footer的背景覆盖；
• min-height只会设置容器的最低高度，当内容高度超过这个值时，容器会自动被撑开，panel-footer的背景色就能完整覆盖所有内容区域。

这样修改后，不管在任何屏幕尺寸下，Footer的背景色都会保持统一，不会再露出页面背景色。

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