移动端Chrome中Header、Nav、Footer背景无法铺满100%宽度求助

针对你遇到的移动端Chrome下header、nav、footer背景无法铺满100%宽度的问题，大概率是以下几个常见原因导致的，逐一排查即可解决：

• 未重置浏览器默认样式
  绝大多数浏览器会默认给body添加margin（通常是8px），同时部分元素的盒模型计算方式会导致宽度超出预期。直接在CSS开头添加全局重置代码：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    overflow-x: hidden; /* 避免子元素溢出导致横向滚动 */
  }
  

  box-sizing: border-box能确保元素的内边距和边框不会额外增加宽度，保证width: 100%是真正的容器宽度。

• 缺失Viewport meta标签
  移动端页面必须在<head>中添加viewport配置，否则浏览器会以桌面端宽度（通常是980px）缩放显示，导致元素宽度计算错误。添加以下代码：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 父容器或元素自身的宽度限制
  检查header、nav、footer的父容器（比如是否有.container类）是否设置了固定宽度（如width: 600px），或者这些元素自身的width被设为非100%的值。将相关元素的宽度改为：

  header, nav, footer {
    width: 100%;
    /* 你的背景色样式 */
  }
  

• 子元素溢出导致横向滚动
  如果页面存在横向滚动条，说明有子元素宽度超出了视口，此时背景色元素虽然是100%宽度，但滚动后会露出空白。检查页面内的卡片、图片等元素，确保它们的宽度不会超过视口（可以用max-width: 100%限制图片和块级元素）。

按照以上步骤排查，基本能解决背景色无法铺满的问题。

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