如何让div固定在视口上下边缘且不脱离正常文档流？

实现方案 #

使用position: sticky即可完美匹配你的需求，无需调整现有flex布局结构，也不会出现元素脱离文档流、内容重叠的问题。

核心修改点

• 给蓝色.sidePanel（如果需要左侧红色侧边导航同步固定，也可给.sideNav添加相同属性）新增3行CSS：

  position: sticky;
  top: 0;
  overflow-y: auto; /* 侧边内容超出高度时支持内部滚动 */
  

完整修改后代码

* {
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: row;
}

.sideNav {
  width: 100px;
  height: 100vh;
  border: 5px solid red;
  /* 如需左侧导航也固定，取消下面三行注释
  position: sticky;
  top: 0;
  overflow-y: auto;
  */
}

.sidePanel {
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
  /* 新增的固定逻辑 */
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
}

<div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

原理解释

position: sticky融合了相对定位和固定定位的特性：元素默认保留在正常文档流中，不会挤占其他元素的排版位置，也就不会出现内容和侧边栏重叠的问题；当页面滚动到侧边栏顶部贴合视口顶部时，元素会切换为固定状态，始终保持top:0、占满100vh的效果，直到父级容器.main完全滚出视口才会跟随移动。配合overflow-y: auto就可以实现侧边栏内容超出时的内部滚动能力。

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