设置width:100%的Footer未占满页面且未居中，如何修复？

你的问题核心是盒模型默认计算逻辑和浏览器全局默认样式的冲突，以下是具体修复方案：

问题根源 #

• 默认CSS盒模型中，width仅计算元素内容区，padding、border会额外增加元素总宽度。你设置了width:100%+padding:10px 0，实际总宽度会超出视口，导致视觉上未占满页面。
• 浏览器默认给body添加了8px左右的margin，会让固定定位的footer左侧出现间隙，看起来未完全居中。
• border-radius:25px是四个角均设置圆角，左右两侧的圆角会让footer视觉上没有贴紧页面边缘。

修复步骤 #

1. 强制盒模型包含内边距与边框
   给footer添加box-sizing: border-box，让width:100%包含padding和border的宽度，避免超出视口：

   footer {
     box-sizing: border-box; /* 新增 */
     background: #fff;
     color: #000;
     clear: both;
     padding: 10px 0px;
     text-align: center;
     border-radius: 25px;
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
   }
   

2. 清除body默认边距
   在全局样式中清除body的默认margin，消除footer左侧间隙：

   body {
     margin: 0; /* 清除浏览器默认边距 */
   }
   

3. 优化圆角显示（可选）
   若想保留圆角同时让footer底部完全贴边，可只给顶部设置圆角：

   border-radius: 25px 25px 0 0; /* 仅顶部两个角保留圆角 */
   

完整代码示例 #

body {
  margin: 0;
}

footer {
  box-sizing: border-box;
  background: #fff;
  color: #000;
  clear: both;
  padding: 10px 0px;
  text-align: center;
  border-radius: 25px 25px 0 0;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

<footer>
  <div class="footer">
    <p>lorem ipsum dolor</p>
  </div>
</footer>

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