汉堡菜单展开时主内容未跟随移动的导航栏问题求助

核心问题分析 #

这个问题大多是因为导航栏或菜单元素脱离了正常文档流（比如用了position: fixed/absolute），导致主内容无法感知到菜单展开后的高度变化。下面是几种直接可行的修复方案：

方案1：让导航栏留在文档流内，用max-height控制菜单展开 #

把菜单的隐藏/显示逻辑从绝对定位改成max-height+overflow: hidden，这样菜单展开时会撑开导航栏高度，自然推动主内容下移。

示例代码修改：

<nav class="navbar">
  <button class="hamburger-btn">☰</button>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>
<main class="main-content">
  <!-- 主内容 -->
</main>

.navbar {
  /* 不要用fixed/absolute，默认relative或static即可 */
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.nav-menu {
  /* 默认隐藏菜单：max-height设为0，溢出隐藏 */
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: max-height 0.3s ease; /* 加过渡动画更流畅 */
}

/* 菜单展开时，给navbar加.expanded类（通过JS触发） */
.navbar.expanded .nav-menu {
  max-height: 300px; /* 设置足够容纳所有菜单项的高度 */
  padding: 1rem 0;
}

.main-content {
  /* 不需要额外设置margin，导航栏高度变化会自动推动它 */
  padding: 1rem;
}

方案2：如果必须用position: fixed导航栏 #

如果导航栏必须固定在顶部，那就需要动态调整主内容的margin-top，匹配导航栏展开后的总高度：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

.main-content {
  /* 默认margin-top等于导航栏收起时的高度 */
  margin-top: 60px;
  transition: margin-top 0.3s ease;
}

/* 菜单展开时，同步增加主内容的margin-top */
.navbar.expanded + .main-content {
  margin-top: 260px; /* 导航栏收起高度60px + 菜单展开高度200px */
}

方案3：用Flex布局整体控制 #

把页面容器设为Flex垂直布局，让导航栏和主内容共享文档流，导航栏高度变化时主内容自动适配：

<div class="page-wrapper">
  <nav class="navbar">...</nav>
  <main class="main-content">...</main>
</div>

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navbar {
  flex-shrink: 0; /* 导航栏不被压缩 */
}

.main-content {
  flex-grow: 1; /* 主内容占满剩余空间 */
}

/* 菜单展开逻辑同方案1，用max-height控制 */
.nav-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.navbar.expanded .nav-menu {
  max-height: 300px;
}

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