如何设置带固定导航栏的页面边距？实现固定布局与滚动控制

当前应用布局可正常运行，但存在两个问题：

• 导航栏无法保持固定位置
• 内容高度或宽度过大时，需依赖浏览器全局滚动条控制（预期实现侧边栏和导航栏固定，仅内容区域滚动）

原始代码 #

app.component.html

<div  id="wrapper">
    <div class="al-left" >
        <app-sidebar [isExpanded]="sidebarExpanded" (toggleSidebar)="sidebarExpanded = !sidebarExpanded" ></app-sidebar>
    </div>

    <div class="al-right"> 
        <app-navbar></app-navbar>
        <div class="ex-right" id="content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

app.component.css

.al-right {flex-grow: 1;}
.al-right{margin-left:0px;
          margin-right:0px;}
.ex-right{
    margin-left:20px;
    margin-right:20px;
}

核心修改思路 #

通过Flex布局规范整体结构，使用position:sticky实现导航栏固定，同时让内容区域独立滚动，避免position:fixed导致的布局脱离问题。

修改后的CSS代码 #

#wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.al-left {
  width: 250px; /* 根据你的侧边栏实际宽度调整 */
  flex-shrink: 0;
  height: 100%;
}

.al-right {
  flex-grow: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

app-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #ffffff; /* 替换为你的导航栏背景色 */
}

.ex-right#content {
  margin: 0 20px;
  flex-grow: 1;
  overflow: auto;
}

关键调整说明 #

1. 整体布局容器：给#wrapper添加Flex布局和100vh高度，让页面整体占满视口，避免浏览器全局滚动。
2. 侧边栏固定：设置.al-left固定宽度并禁止收缩，确保侧边栏始终保持布局位置。
3. 右侧区域垂直排列：.al-right改为垂直Flex布局，让导航栏和内容区域上下分布，高度占满剩余空间。
4. 导航栏固定：用position:sticky替代fixed，既实现滚动时固定在顶部，又不会脱离当前布局流，避免布局混乱；z-index确保导航栏在内容上方，背景色防止内容滚动时穿透显示。
5. 内容区域滚动：给#content设置flex-grow:1占满剩余高度，overflow:auto让内容超出时自动显示滚动条。

内容的提问来源于stack exchange，提问作者R. Baraiya