如何让固定Header与Footer铺满页面边缘，且正文与两者间距均等？

1. 修复Fixed Header 铺满页面左右边缘 #

fixed定位的Header无法铺满，大多是两个原因：浏览器默认给body加了margin（一般为8px），或者Header仅设置width: 100%却未锁定左右位置，自身还带有额外的padding/margin。

修正代码示例： #

先重置全局默认样式，解决body margin问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 确保padding不会撑开元素宽度，避免横向滚动 */
}

再调整Header的CSS，直接锁定左右边缘：

.fixed-header {
  position: fixed;
  top: 0;
  left: 0; /* 贴紧页面左边缘 */
  right: 0; /* 贴紧页面右边缘，替代width:100%，自动铺满 */
  background-color: #333;
  color: #fff;
  height: 60px; /* 自定义Header高度 */
  line-height: 60px;
  text-align: center;
}

Footer如果要确保绝对铺满，可补充以下样式（若之前正常也可保留，统一风格）：

footer {
  left: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  height: 60px; /* 和Header高度一致，方便后续统一边距 */
  line-height: 60px;
  text-align: center;
}

2. 让正文与Header、Footer距离相等 #

由于fixed定位的Header会脱离文档流，需要给正文容器设置对应padding-top和padding-bottom，确保内容不被遮挡且边距一致：

正文CSS示例： #

.main-content {
  padding-top: 60px; /* 数值等于Header高度 */
  padding-bottom: 60px; /* 数值等于Footer高度 */
  min-height: calc(100vh - 120px); /* 让正文占满剩余屏幕高度，120为Header+Footer总高度 */
  padding-left: 20px;
  padding-right: 20px;
}

如果想要的是内容与Header/Footer之间有额外空白间距（不是完全贴合），可以调整为：

.main-content {
  padding-top: calc(60px + 20px); /* Header高度+额外空白 */
  padding-bottom: calc(60px + 20px); /* Footer高度+额外空白 */
  min-height: calc(100vh - 120px - 40px); /* 减去额外的上下空白总高度 */
}

完整HTML结构示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .fixed-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #333;
      color: white;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
    .main-content {
      padding-top: 60px;
      padding-bottom: 60px;
      min-height: calc(100vh - 120px);
      padding-left: 20px;
      padding-right: 20px;
    }
    footer {
      left: 0;
      right: 0;
      background: #333;
      color: white;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>
<body>
  <header class="fixed-header">Fixed Header</header>
  <div class="main-content">
    这里是正文内容，会自动和Header、Footer保持相等距离
  </div>
  <footer>Footer</footer>
</body>
</html>

注意：如果你的Header/Footer高度不同，只需对应调整padding-top/padding-bottom和min-height的数值即可。

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