如何用Flexbox和Bootstrap 4实现固定头部、左侧导航与流式内容布局？

嘿，我来帮你搞定这个固定布局的问题！你现在的基础Flex框架已经搭得很到位了，只需要给头部和侧边栏加上固定定位，再调整内容区域的边距来避免被遮挡就行，具体修改步骤如下：

1. 固定顶部头部 #

给<header>添加固定定位属性，同时确保它在最上层不被覆盖，还要给后续内容区留出头部的高度空间：

header {
  z-index: 1000; /* 确保头部在最上层，避免被其他元素遮挡 */
  flex: 0 64px;
  display: flex;
  background: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
  /* 新增固定定位 */
  position: fixed;
  top: 0;
  width: 100%;
}

2. 固定左侧侧边栏 #

侧边栏需要从头部下方开始固定，高度占满剩余视口空间，如果侧边栏内容过长还可以开启内部滚动：

nav {
  background: #FAF9F8;
  flex: 0 0 256px;
  order: 0;
  border-right: 1px solid #d9d9d9;
  /* 新增固定定位 */
  position: fixed;
  top: 64px; /* 和头部高度一致，从头部下方开始 */
  left: 0;
  height: calc(100vh - 64px); /* 视口高度减去头部高度，占满剩余空间 */
  overflow-y: auto; /* 侧边栏内容过长时允许内部滚动 */
}

3. 调整内容区域的位置 #

因为头部和侧边栏脱离了文档流，需要给内容区添加边距避开它们，同时让内容区可以独立滚动：

article {
  background: #F3F3F5;
  flex: 1 1 100px;
  order: 1;
  /* 新增边距，避开头部和侧边栏 */
  margin-left: 256px; /* 和侧边栏宽度一致 */
  padding-top: 64px; /* 和头部高度一致 */
  min-height: 100vh; /* 确保内容区至少占满视口高度 */
  /* 模拟大高度 */
  height: 2000px;
}

修改后的完整代码 #

HTML #

<header> header </header>
<app>
  <nav> nav </nav>
  <article> Content </article>
</app>

CSS #

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body {
  margin:0;
  display: flex;
  flex-direction: column;
}
header {
  z-index: 1000;
  flex: 0 64px;
  display: flex;
  background: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
  position: fixed;
  top: 0;
  width: 100%;
}
app {
  flex: 1;
  display: flex;
}
nav {
  background: #FAF9F8;
  flex: 0 0 256px;
  order: 0;
  border-right: 1px solid #d9d9d9;
  position: fixed;
  top: 64px;
  left: 0;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
article {
  background: #F3F3F5;
  flex: 1 1 100px;
  order: 1;
  margin-left: 256px;
  padding-top: 64px;
  min-height: 100vh;
  height: 2000px;
}

额外提示（Bootstrap4适配） #

如果你想用Bootstrap4的内置类简化代码，可以：

• 给<header>添加fixed-top类，替代自定义的固定定位CSS
• 给<nav>添加position-fixed类，再手动调整top和height属性，这样能利用Bootstrap的默认样式，减少自定义代码量

这样修改后，头部和侧边栏就会牢牢固定在页面上，只有内容区域会滚动，完全符合你想要的布局效果啦！

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