CSS问题：fixed定位头部导航栏遮挡内容，如何适配全视口避免遮挡？

我按照如下方式生成头部导航、侧边栏和内容区域：

<nav class="navbar navbar-expand-sm pad">
  <ul class="navbar-nav">
    <li *ngFor="let module of modules">
      <a class="nav-link" [routerLink]="['/navbar',module.id]" routerLinkActive="active">
        {{module.name}}
      </a>
    </li>
    <li>
      <a class="nav-link" [routerLink]="['dashboard']" routerLinkActive="active">
        Dashboard
      </a>
    </li>
    <li>
      <a class="nav-link" [routerLink]="['test-page']" routerLinkActive="active">
        Test
      </a>
    </li>
  </ul>
</nav>

<div id="content" class="container-fluid">
  <router-outlet></router-outlet>
</div>

页面渲染效果如下图所示。当前头部导航栏的position属性设置为fixed，因此content div的部分内容被遮挡在导航栏下方。我了解到为content div设置margin-top:Xpx可以解决该问题，但在移动端模式下该方案不生效，内容仍然会被导航栏遮挡。请问当头部导航栏position设置为fixed时，是否有方案可以保证在任意视口下，content div的内容始终完整展示在导航栏下方？

解决方案 #

以下两种方案都可以实现全视口下内容不被导航栏遮挡：

方案1：使用position: sticky替代fixed（优先推荐）

sticky定位同时具备普通元素占位和滚动吸顶的特性，导航栏会在文档流中占据对应的实际高度，下方内容区域不需要额外设置边距，无论视口尺寸变化、导航栏是否折叠展开，都不会出现内容遮挡问题，适配成本极低。
只需给导航栏添加如下样式即可：

.navbar {
  position: sticky;
  top: 0;
  z-index: 1020; /* 保证导航栏层级高于页面其他内容，避免被覆盖 */
}

该特性兼容所有主流现代浏览器，无需兼容IE10及更低版本即可直接使用。

方案2：必须使用fixed定位时，动态计算导航栏高度调整边距

固定margin-top失效的核心原因是移动端导航栏折叠/展开时高度会动态变化，固定数值无法适配所有场景。你可以通过JS实时获取导航栏的实际高度，同步给内容区设置对应边距，同时监听窗口尺寸变化、导航栏折叠/展开事件触发更新即可。
你使用的是Angular框架，可以参考如下代码实现：

import { Component, HostListener, AfterViewInit } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 页面初始化完成后首次调整
    this.adjustContentMargin();
  }

  // 窗口尺寸变化时自动调整
  @HostListener('window:resize')
  adjustContentMargin(): void {
    const navHeight = document.querySelector('.navbar').offsetHeight;
    document.getElementById('content').style.marginTop = `${navHeight}px`;
  }

  // 导航栏折叠/展开按钮的点击事件中，手动调用一次adjustContentMargin()即可
}

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