如何使用flexbox实现固定头部侧边栏且无需手动设置偏移margin

完全不需要给头部和侧边栏加position: fixed，也不用给主内容加额外margin，仅靠flex的分配规则和滚动容器控制就能实现，具体逻辑如下：

实现步骤 #

• 首先重置全局样式，给html、body以及页面最外层容器设置height: 100vh; margin: 0; padding: 0;，让页面刚好占满整个视口高度，全局禁止超出滚动。
• 页面基础结构按照层级拆分：

  <!-- 最外层垂直flex容器 -->
  <div class="root">
    <header>固定头部</header>
    <!-- 中间内容区 水平flex容器 -->
    <div class="content-row">
      <aside>固定侧边栏</aside>
      <div class="content">可滚动的主内容</div>
    </div>
  </div>
  

• 给最外层.root设置display: flex; flex-direction: column; overflow: hidden;
• 给头部header设置固定高度，再加flex-shrink: 0，避免被flex布局压缩高度。
• 给中间的.content-row设置flex: 1; display: flex; overflow: hidden;，自动占满头部之外的所有剩余视口高度。
• 给侧边栏aside设置固定宽度，再加flex-shrink: 0，避免被flex布局压缩宽度。
• 最后给主内容.content设置flex: 1; overflow: auto;，占满侧边栏之外的剩余宽度，内容超出时仅在该容器内部滚动。

效果说明 #

这种实现逻辑下，滚动行为只发生在主内容容器内部，头部和侧边栏本身不属于滚动容器的一部分，视觉上就是固定在页面上的，不会出现遮挡主内容的问题。

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