Angular项目中Fixed-top Navbar遮挡页面组件的问题求助

嘿，这个问题我之前开发项目时也碰到过！当你给导航栏加上fixed-top类后，它会脱离正常的文档流，页面里的其他元素不会自动为它预留空间，自然就会出现内容被顶部导航栏遮挡的情况。结合你的代码，这里有几个简单有效的解决办法：

方法1：给页面根容器添加顶部内边距 #

你已经给导航栏设置了固定的height: 60px，最直接的方式就是给页面的根元素或者router-outlet的父容器加上对应的顶部内边距，让内容从导航栏下方开始展示。

你可以在全局的styles.css（或styles.scss）里添加：

body {
  padding-top: 60px;
}

或者在app.component.css里给宿主元素设置样式（这样只会影响App组件下的内容，更精准）：

:host {
  display: block;
  padding-top: 60px;
}

方法2：给router-outlet套一个带内边距的容器 #

如果你不想修改全局样式，也可以给router-outlet外面包裹一个div，直接给这个div加顶部内边距：
修改你的App组件代码：

<app-header></app-header>
<div class="content-container">
  <router-outlet></router-outlet>
</div>

然后在app.component.css里添加：

.content-container {
  padding-top: 60px;
}

额外优化提示 #

如果你担心导航栏高度以后会变化，可以用CSS变量来统一管理高度，避免后续改多处代码：
先在全局样式里定义变量：

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

然后导航栏的高度和内容的内边距都引用这个变量：

nav {
  height: var(--navbar-height);
  /* 其他原有样式保持不变 */
}

:host {
  padding-top: var(--navbar-height);
}

这样以后要调整导航栏高度，只需要修改--navbar-height的值就可以了。

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