高度可变的固定菜单下方放置内容元素的优雅方案咨询

这种动态高度的固定菜单适配问题太常见了，完全不用搞复制隐藏菜单那套冗余操作，给你两个更清爽的实现方式：

纯CSS方案（首推，零JS） #

用CSS Grid布局就能让内容自动“贴”在菜单下方，完全不用手动计算高度：

代码示例 #

<div id="menu">
  <ul>
    <li>菜单项 1</li>
    <li>菜单项 2</li>
    <li>菜单项 3</li>
    <!-- 菜单项数量变化时，菜单高度会自动调整 -->
  </ul>
</div>
<div id="content">
  <p>这里是内容区域，会自动位于菜单下方</p>
  <!-- 大量内容：滚动时会在菜单后方正常滚动 -->
</div>

/* 重置body默认边距，避免布局偏移 */
body {
  margin: 0;
  /* 用Grid划分页面：第一行自适应菜单高度，第二行占满剩余空间 */
  display: grid;
  grid-template-rows: auto 1fr;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff; /* 避免内容透过菜单显示 */
  width: 200px; /* 根据你的垂直菜单需求设置宽度 */
  padding: 1rem;
}

#content {
  grid-row: 2; /* 强制内容放在Grid的第二行 */
  margin-left: 220px; /* 等于菜单宽度+内边距，避免内容被菜单遮挡 */
  padding: 1rem;
}

原理：Grid布局会先自动计算菜单的渲染高度并预留第一行空间，哪怕菜单设置了position: fixed脱离文档流，内容区域依然会稳稳占据Grid第二行的位置，完美适配菜单的动态高度。

JavaScript方案（兼容性更强） #

如果需要兼容老旧浏览器，或者菜单高度会随窗口 resize 动态变化，用JS动态计算是更稳妥的选择：

代码示例 #

<div id="menu">
  <ul>
    <li>菜单项 1</li>
    <li>菜单项 2</li>
    <li>菜单项 3</li>
  </ul>
</div>
<div id="content">
  <!-- 内容区域 -->
</div>

#menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  width: 200px;
  padding: 1rem;
}

#content {
  margin-left: 220px; /* 避开菜单宽度，防止内容被遮挡 */
  padding: 1rem;
}

// 封装计算并设置内容上边距的函数
function setContentMargin() {
  const menu = document.getElementById('menu');
  const content = document.getElementById('content');
  // 用offsetHeight获取菜单渲染后的实际高度，动态设置margin-top
  content.style.marginTop = `${menu.offsetHeight}px`;
}

// 页面加载完成后执行一次
window.addEventListener('load', setContentMargin);
// 窗口大小变化时重新计算（如果菜单高度会随窗口变化）
window.addEventListener('resize', setContentMargin);

原理：offsetHeight能精准获取菜单渲染后的实际高度（包含内边距、边框），动态给内容设置上边距，确保内容始终紧跟在菜单下方，窗口大小变化时也能实时更新。

这两个方案都比复制隐藏菜单简洁得多，纯CSS方案更轻量化，JS方案则兼容性更好、更灵活，你可以根据项目需求选择。

内容的提问来源于stack exchange，提问作者Serafín Álvarez