如何解决HTML和CSS中粘性Header与Footer遮挡内容的问题？

问题分析 #

你当前代码的核心问题是给header和footer设置了min-height: 100%，这会让它们直接占满整个视口高度，导致main内容被完全遮挡；同时没有处理主内容的滚动空间和布局结构。

解决方案1：Flex布局方案（推荐，无需fixed定位） #

这种方式通过Flex布局让body成为垂直容器，header和footer保持自身高度，main自动填充剩余空间并支持滚动，语义化和兼容性都更好。

HTML（保持语义化结构，无需修改）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Benazir Beauty</title>
  </head>
  <body>
    <header>Header</header>
    <main>
      <!-- 可添加大量内容测试滚动效果 -->
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
      <p>主内容区域</p>
    </main>
    <footer>Footer</footer>
  </body>
</html>

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

/* 让body成为垂直flex容器，占满视口高度 */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* header和footer保持自身高度，不挤压主内容 */
header, footer {
  padding: 1rem;
  background: #f5f5f5;
}

/* main自动填充剩余空间，超出部分可滚动 */
main {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

解决方案2：Fixed定位方案（适合固定在视口的场景） #

如果必须用fixed定位，需给main设置上下margin避开header和footer的高度，确保内容可滚动：

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header, footer {
  position: fixed;
  width: 100%;
  /* 设置固定高度，替代原有的100%高度 */
  height: 60px;
  padding: 0 1rem;
  background: #f5f5f5;
  display: flex;
  align-items: center;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}

/* 给main设置上下margin，避开fixed元素 */
main {
  margin-top: 60px;
  margin-bottom: 60px;
  min-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1rem;
}

说明 #

• Flex方案无需手动计算高度，布局更灵活，适配大多数场景；
• Fixed方案需明确设置header和footer的高度，适合元素必须始终固定在视口顶部/底部的需求；
• 两种方案均保留了语义化的<header>、<main>、<footer>结构，符合你的要求。

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