Angular 如何在角度应用中固定头部

我使用的是angular 9，我有两个组件：头部和身体

在

AppComponent

中，我一直在固定顶部标题（红色）的位置！问题是主体（蓝色）在标题上方

app头{
位置：固定；
排名：0；
左：0；
右：0；
显示：块；/*用于演示*/
背景：红色；/*用于演示*/
高度：50px；/*用于演示*/
}
.身体{
位置：粘性；
边框：4px纯蓝色；/*用于演示*/
高度：800px；/*用于演示*/
}

---

您的做法是错误的，您可以使用此选项

.html

<div class="app-header">
    <app-header></app-header>
</div>

.css

.app-header{
position:fixed;
top:0;
}

.html
.css
.应用程序标题{
位置：固定；
排名：0；
}

你不能给你的component加上它的名字

---

A.因此，您可以在应用程序标题中执行此解决方案，这意味着将它们全部包装在一个div中，并为其提供样式

您可以创建一个容器，并将

display:flex

应用到标题中。让我举一个例子：

风格：

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

app-header {
    height: 30px;
    background-color: orange;
}

.main {
     flex: 1;
}

和HTML：

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

标题

使用display:grid并在根页面中创建3行。