Flexbox布局问题：main被fixed header遮挡，求修复方案

嘿，这个问题我做SPA的时候也踩过一模一样的坑！核心原因其实很好理解：fixed定位的元素会完全脱离正常文档流，所以你给body设置的flex布局在计算空间分配时，根本不会把header的高度算进去——main元素会默认从页面最顶部开始排列，自然就被悬浮的header给挡住了。

下面给你两个关键修复步骤，配合代码调整就能彻底解决：

1. 修正Body的高度设置 #

你原来的body { height: 100%; }存在问题，因为html元素默认没有设置高度，这个100%的取值不会生效。改成min-height: 100vh，这样body会至少占满整个视口高度，当内容超过视口时还能自动延伸，避免布局塌陷。

2. 给Main元素手动留出Header的空间 #

因为fixed的header脱离了文档流，我们需要给main设置margin-top，值等于header的实际高度。同时给main加上flex:1，让它在flex布局中占满body除了header和footer之外的所有空间，确保footer能自动贴在页面底部（即使内容不够多）。

修改后的完整CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh; /* 替换height:100%，确保body占满视口且可延伸 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background: #0dfd8d;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
  height: 7rem; /* 固定header高度，和你的logo高度一致 */
}

.main-header__logo {
  text-decoration: none;
}

.main-header__logo img {
  height: 7rem;
  vertical-align: middle;
}

.main-header__items {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.main-header__item {
  margin: 1rem;
}

.main-header__item a {
  text-decoration: none;
  color: black;
}

main {
  margin-top: 7rem; /* 让main从header下方开始排列 */
  flex: 1; /* 占满body剩余空间，配合flex布局固定footer位置 */
}

额外说明 #

如果你的header需要响应式高度（比如移动端导航换行后高度变化），可以用CSS变量结合媒体查询，或者用JavaScript动态计算header的高度并设置给main的margin-top。但在你的当前场景下，固定高度是最直接且高效的解决方案。

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