如何将顶部及侧边导航设为fixed，同时实现内部内容滚动？

你的问题核心是fixed元素脱离文档流后，滚动区域计算错误和元素层级冲突，以下是两种可靠的解决思路，无需给每个元素单独做复杂设置，通过容器层级就能实现需求：

方案一：传统定位+滚动容器隔离 #

通过给固定元素设置position: fixed，再给滚动内容容器预留足够间距，让容器自身负责内容滚动：

1. 给顶部导航、侧边栏、面包屑、表头分别设置固定定位，明确位置和尺寸避免重叠：

/* 顶部导航：占满顶部宽度 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  z-index: 100; /* 确保处于最上层 */
}

/* 侧边栏：从顶部导航下方延伸至页面底部 */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #f5f5f5;
  z-index: 90;
}

/* 面包屑：顶部导航下方、侧边栏右侧区域 */
.breadcrumb {
  position: fixed;
  top: 60px;
  left: 200px;
  right: 0;
  height: 40px;
  background: #eee;
  z-index: 90;
}

/* 表头：面包屑下方、侧边栏右侧区域 */
.table-header {
  position: fixed;
  top: 100px;
  left: 200px;
  right: 0;
  background: #fff;
  z-index: 90;
}

2. 给内容容器设置间距和滚动属性，让它避开所有固定元素，自身内容超出时滚动：

.content-container {
  /* 顶部间距 = 导航高度 + 面包屑高度 + 表头高度 */
  margin-top: 140px;
  /* 左侧间距 = 侧边栏宽度 */
  margin-left: 200px;
  /* 容器高度 = 可视高度 - 顶部间距 */
  height: calc(100vh - 140px);
  overflow-y: auto;
}

方案二：CSS Grid布局（推荐，更易维护） #

用Grid将页面划分为固定的行和列，固定区域占据对应网格，滚动区域占据剩余空间，无需手动计算间距：

1. 给页面根容器设置Grid布局，划分行和列：

.page-container {
  display: grid;
  /* 行：导航高度、面包屑高度、剩余高度分配给内容区 */
  grid-template-rows: 60px 40px auto;
  /* 列：侧边栏宽度、剩余宽度分配给内容区 */
  grid-template-columns: 200px auto;
  height: 100vh; /* 占满整个可视高度 */
}

2. 给各个元素分配网格位置，表头用sticky实现固定（相对于内容区）：

.top-nav {
  grid-row: 1 / 2;
  grid-column: 1 / -1; /* 占满整行 */
  background: #fff;
}

.sidebar {
  grid-row: 2 / -1; /* 从面包屑行延伸至页面底部 */
  grid-column: 1 / 2;
  background: #f5f5f5;
}

.breadcrumb {
  grid-row: 2 / 3;
  grid-column: 2 / -1; /* 占据侧边栏右侧的面包屑行 */
  background: #eee;
}

.table-header {
  grid-row: 3 / 4;
  grid-column: 2 / -1;
  position: sticky;
  top: 0; /* 相对于内容容器固定在顶部 */
  background: #fff;
  z-index: 10;
}

.content-container {
  grid-row: 3 / 4;
  grid-column: 2 / -1;
  overflow-y: auto; /* 内容超出时自动滚动 */
}

关键避坑点 #

• 不要给body或html设置overflow: hidden，这会导致整个页面无法滚动，是你之前遇到内容不能滚动的常见原因
• 固定元素的z-index要合理设置，避免被其他元素覆盖
• 用Grid布局时，所有元素都在正常文档流内，无需手动计算margin，后续调整尺寸更方便

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