如何实现Fixed navbar固定导航栏并让内容位于其下方

因为fixed定位会脱离文档流，导致下方内容无法感知导航栏的存在，以下是几种无需手动猜测margin值的自动适配方法：

方法1：CSS变量 + JavaScript 动态计算高度 #

这种方法能实时适配导航栏的高度变化（比如响应式调整、内容换行）：

1. 先在全局定义CSS变量，并给内容容器设置padding-top：

:root {
  --navbar-height: 0px;
}

.content-container {
  padding-top: var(--navbar-height);
}

/* 给导航栏加上盒模型属性，确保高度计算准确 */
.navbar {
  box-sizing: border-box;
  top: 0;
  left: 0;
  /* 保留你原有样式 */
}

2. 修改HTML，给下方内容的div添加类名：

<div class="content-container">
  ...below content
</div>

3. 添加JavaScript代码，在页面加载和窗口 resize 时更新导航栏高度变量：

function updateNavbarHeight() {
  const navbar = document.querySelector('.navbar');
  document.documentElement.style.setProperty('--navbar-height', navbar.offsetHeight + 'px');
}

// 页面加载完成后计算
window.addEventListener('load', updateNavbarHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', updateNavbarHeight);

方法2：占位元素预留空间 #

给导航栏添加一个同高度的占位元素，留在文档流中占据空间，避免内容被遮挡：

1. 修改HTML，在导航栏的父div里添加占位元素：

<div>
  <ul class='navbar'>
    <!-- 导航栏原有内容 -->
  </ul>
  <div class="navbar-placeholder"></div>
</div>

2. 结合方法1的CSS变量和JavaScript，给占位元素设置高度：

.navbar-placeholder {
  height: var(--navbar-height);
}

这样占位元素会自动匹配导航栏的实际高度，把下方内容往下推。

方法3：CSS Grid 布局自动分配空间 #

用Grid布局将页面分成导航栏区域和内容区域，自动预留导航栏的高度空间：

1. 修改CSS：

article {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.navbar-wrapper {
  grid-row: 1;
}

.content-container {
  grid-row: 2;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  /* 保留你原有样式 */
}

2. 修改HTML，给导航栏的父div添加类名：

<article>
  <div class="navbar-wrapper">
    <ul class='navbar'>
      <!-- 导航栏原有内容 -->
    </ul>
  </div>
  <div class="content-container">
    ...below content
  </div>
</article>

Grid布局会自动让第一行适配导航栏的高度，内容区域自动从第二行开始，无需手动计算任何数值。

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