如何用CSS实现带固定侧边栏与顶部栏的Dashboard布局？

下面针对你需要的两种Dashboard布局，提供基于CSS Grid和Sticky定位的实现方案，核心满足侧边栏、顶部栏固定，内容区域可滚动的需求。

布局1：侧边栏贯穿全屏高度，顶部栏仅覆盖右侧区域 #

对应你提供的第一张效果图，侧边栏固定在左侧并占据整个视口高度，顶部栏固定在右侧顶部，内容区域在右侧下方滚动。

HTML结构 #

<div class="dashboard-layout-1">
  <aside class="sidebar">
    <!-- 侧边栏操作项 -->
    <div>菜单1</div>
    <div>菜单2</div>
    <div>菜单3</div>
  </aside>
  <header class="topbar">
    <!-- 登录/登出等功能 -->
    <button>登出</button>
  </header>
  <main class="content">
    <!-- 可滚动的内容区域 -->
    <div class="content-item">内容块1</div>
    <div class="content-item">内容块2</div>
    <!-- 重复多个内容块模拟滚动 -->
  </main>
</div>

CSS代码 #

/* 基础容器设置 */
.dashboard-layout-1 {
  display: grid;
  /* 左侧侧边栏固定宽度，右侧自适应 */
  grid-template-columns: 280px 1fr;
  /* 顶部栏固定高度，剩余空间给内容 */
  grid-template-rows: 60px 1fr;
  height: 100vh; /* 占满整个视口高度 */
  margin: 0;
}

/* 侧边栏固定 */
.sidebar {
  grid-row: 1 / -1; /* 侧边栏占据所有行 */
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: #2d3748;
  color: #fff;
  padding: 20px;
  z-index: 10; /* 确保在内容上方 */
}

/* 顶部栏固定 */
.topbar {
  grid-column: 2 / -1; /* 顶部栏仅覆盖右侧列 */
  position: sticky;
  top: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
}

/* 内容区域可滚动 */
.content {
  grid-column: 2 / -1;
  overflow-y: auto; /* 垂直方向超出时滚动 */
  padding: 20px;
  background-color: #f7fafc;
}

/* 模拟内容高度 */
.content-item {
  height: 300px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

布局2：顶部栏贯穿全屏宽度，侧边栏在顶部栏下方 #

对应你提供的第二张效果图，顶部栏固定在页面顶部并横跨整个宽度，侧边栏固定在左侧下方，内容区域在右侧下方滚动。

HTML结构 #

<div class="dashboard-layout-2">
  <header class="topbar">
    <!-- 登录/登出等功能 -->
    <button>登出</button>
  </header>
  <aside class="sidebar">
    <!-- 侧边栏操作项 -->
    <div>菜单1</div>
    <div>菜单2</div>
    <div>菜单3</div>
  </aside>
  <main class="content">
    <!-- 可滚动的内容区域 -->
    <div class="content-item">内容块1</div>
    <div class="content-item">内容块2</div>
    <!-- 重复多个内容块模拟滚动 -->
  </main>
</div>

CSS代码 #

/* 基础容器设置 */
.dashboard-layout-2 {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  margin: 0;
}

/* 顶部栏固定，横跨所有列 */
.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
}

/* 侧边栏固定在顶部栏下方 */
.sidebar {
  grid-row: 2 / -1;
  position: sticky;
  top: 60px; /* 与顶部栏高度一致，避免被遮挡 */
  height: calc(100vh - 60px); /* 减去顶部栏高度 */
  background-color: #2d3748;
  color: #fff;
  padding: 20px;
  z-index: 10;
}

/* 内容区域可滚动 */
.content {
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  overflow-y: auto;
  padding: 20px;
  background-color: #f7fafc;
}

/* 模拟内容高度 */
.content-item {
  height: 300px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

关键注意事项 #

• 使用position: sticky替代fixed，结合Grid布局可以更灵活地适配不同布局，无需手动计算偏移量。
• 通过设置容器height: 100vh确保布局占满整个视口，内容区域通过overflow-y: auto实现滚动。
• 给固定栏添加z-index，避免被滚动的内容区域覆盖。
• 可以通过CSS变量统一管理侧边栏宽度、顶部栏高度，方便后续调整：

  :root {
    --sidebar-width: 280px;
    --topbar-height: 60px;
  }
  

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