HTML 中 <footer> 标签设置 background-color 后颜色未生效，通常是因为元素高度为 0（无内容或未清除浮动），导致背景不可见；添加内容、设置高度或最小高度即可修复。

html 中 `

` 标签设置 `background-color` 后颜色未生效，通常是因为元素高度为 0（无内容或未清除浮动），导致背景不可见；添加内容、设置高度或最小高度即可修复。

在 HTML 中，<footer> 是一个块级元素，但它的默认高度由其内部内容决定。如果 <footer> 标签为空（即没有子元素、文本或伪内容），且未显式设置 height、min-height 或 padding，那么它的计算高度为 0px——此时即使设置了 background-color，也因“无渲染区域”而完全不可见。

✅ 正确做法是确保 footer 具有可渲染的高度。最直接的方式是：向其中添加内容，例如标题、段落或空格占位符：

<footer style="background-color: hsl(0, 18%, 81%)">
  <p> </p> <!-- 或更语义化的内容 -->
</footer>

⚠️ 注意：你原代码中 HSL 写法 hsl(0 18% 81%) 缺少逗号（应为 hsl(0, 18%, 81%)），虽然部分现代浏览器可能容错解析，但严格语法要求逗号分隔，建议修正以保证兼容性。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

? 更健壮的解决方案（推荐用于生产环境）：

立即学习“前端免费学习笔记（深入）”；

• 使用 min-height 确保最低视觉高度；
• 添加 padding 提升内边距，同时增强可点击/可交互区域；
• 避免仅依赖空格或  ，优先采用语义化内容或 CSS 伪元素占位。

示例（兼顾语义与样式）：

<footer style="background-color: hsl(0, 18%, 81%); min-height: 60px; padding: 1rem;">
  <small>&copy; 2024 My Website. All rights reserved.</small>
</footer>

? 总结：
背景色“不显示”本质是元素无尺寸，而非样式失效。排查顺序应为：① 检查是否闭合标签并含内容；② 验证 HSL/HEX/COLOR 值语法；③ 查看 DevTools 中该元素的 computed height 和 box model；④ 必要时通过 min-height 或 padding 主动赋予尺寸。