响应式顶部导航折行时与页面内容margin间距恒定设置问题

• 方案1：无吸顶需求优先用正常文档流布局
  你遇到的问题本质是固定margin-top无法适配导航栏动态变化的高度，如果你没有导航栏吸顶的需求，直接移除导航栏的position: fixed/position: absolute属性即可。导航栏会自动占据正常文档流高度，下方内容会自动跟随在导航栏之后，不需要额外给内容设置margin-top。如果需要控制两者的间距，直接给导航栏添加margin-bottom: 你需要的间距值即可，导航栏不管折多少行，间距都会自动保持一致。
• 方案2：需吸顶场景下的适配方案
  如果导航栏需要固定在视口顶部，必须使用position: fixed定位，可以选以下任意一种方式实现动态适配：
  1. CSS变量+JS动态监听
     定义全局CSS变量存储导航栏高度，通过JS监听页面加载、窗口 resize 事件，实时更新导航栏高度到变量中，内容区直接用该变量计算margin-top即可。
     示例代码：

  /* 全局定义导航高度变量，设置默认值作为降级适配 */
  :root {
    --nav-height: 60px;
  }
  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .content {
    /* 20px为导航与内容的自定义间距，可自行调整 */
    margin-top: calc(var(--nav-height) + 20px);
  }
  

  const navEl = document.querySelector('你的导航选择器');
  const updateNavHeight = () => {
    document.documentElement.style.setProperty('--nav-height', `${navEl.offsetHeight}px`);
  }
  // 页面加载和窗口尺寸变化时都更新高度
  window.addEventListener('load', updateNavHeight);
  window.addEventListener('resize', updateNavHeight);
  

  2. 占位元素方案
     在固定定位的导航栏同级下方，新增一个和导航结构完全一致的占位元素，给占位元素设置visibility: hidden属性，让占位元素不显示但占据正常文档流高度，自动把下方内容撑开。导航栏折行时占位元素会同步折行，高度自动和导航栏保持一致，不需要额外计算。

  注意：要保证导航栏和占位元素的所有布局相关属性（比如padding、font-size、flex-wrap等）完全一致，避免两者高度出现偏差。

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