我正在做一个应用程序与毛伊岛，托管blazor。
我做了一个布局，AppBarTop和appBarBottom position: fixed;问题是我的身体现在占据了整个屏幕，覆盖了我的应用程序栏（它们在它们下面，但当检查时，你可以看到它们也占据了它们的空间）。我试图将栏的位置设置为粘性，但然后它们滚动，因为它们托管在容器中。

@inherits LayoutComponentBase
<AppBarTop />
<Navigation />
@Body
<AppBarBottom/>

字符串
作为参考，我的顶部酒吧看起来像这样：

<header class="top-app-bar">
<div class="container">
    <div class="left-section">
        <div class="circle-placeholder"></div>
    </div>
    <div class="right-section">
        <h1 class="text">@FullName</h1>
        <p class="text">Welcome!</p>
    </div>
</div>

.top-app-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 120px;
    width: 100%;
    background-color: #323232;
    color: white;
    position: fixed;
}

.container {
    display: flex;
    gap: 10px;
    flex: 1;
    align-items: center;
    margin-left: 20px;
}

的数据
我错过了看到我的身体如何调整其大小，以考虑到页眉和页脚。