CSS - 内容隐藏在 header 栏后面

Question

我正在生成我的 header、sidenav 和这样的内容

<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>

页面呈现像附加图像。 Header 栏 position 设置为固定，因此“内容” div 的某些部分隐藏在 header 栏后面。 如何解决这个问题。 我知道如果将“内容” div 设置为"margin-top:Xpx"之类的东西将解决这个问题。 但是，在移动模式下查看时，这不起作用，内容再次出现在 header 栏后面。 当 header 栏 position 设置为fixed时，有没有办法在任何视口中， content div的内容应始终显示在 header 栏下方。

Answer 1

不要使用position:fixed; - 使用position:sticky; top:0; position:sticky; top:0; 反而。

粘性定位 | position - CSS：级联样式表 | MDN