如何实现header与footer间滚动固定的满高度侧边栏（类似Twitch聊天区）

用CSS原生position: sticky即可实现需求，无需额外JavaScript代码，效果和Twitch侧边栏完全一致，且自动适配Header与Footer的边界限制。

核心修改点 #

• 废弃原有浮动布局，改用Flex布局实现外层容器的自适应排列，避免浮动高度塌陷问题
• 给三个侧边栏添加粘性定位属性，设置吸附位置为Header的高度，滚动过Header后自动固定在视口对应位置
• 侧边栏高度设置为视口高度减去Header高度，占满可用视口空间
• 主内容区域高度决定外层容器高度，粘性定位的侧边栏会在外层容器滚动到Footer区域时自动跟随上移，不会遮挡Footer

完整修改后代码 #

CSS代码 #

body{margin:0px;padding:0px;}
.header-wrapper{
  width:100%;
  background:gray;
  /* 自定义Header高度，可根据实际需求调整 */
  height: 80px;
}
.outer-wrapper{
  width:100%;
  display: flex;
}
.left-sidebar{
  width:15%;
  background:red;
  /* 粘性定位核心属性 */
  position: sticky;
  /* 若Header需要固定在顶部不随滚动消失，top设为80px，若Header随滚动消失top设为0即可 */
  top: 80px;
  /* 高度占满视口剩余空间 */
  height: calc(100vh - 80px);
}
.main-wrapper{
  width:45%;
  background:yellow;
  /* 主内容高度可根据实际内容自适应，此处设置固定高度方便测试滚动效果
  height: 1500px;
}
.mid-sidebar{
  width:20%;
  background:blue;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
}
.right-sidebar{
  width:20%;
  background:orange;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
}
.footer-wrapper{
  width:100%;
  background:green;
  /* 自定义Footer高度，可根据实际需求调整 */
  height: 100px;
}

HTML代码 #

<body>
<div class="header-wrapper">HEADER
</div>

<div class="outer-wrapper">

<div class="left-sidebar">
</div>

<div class="main-wrapper">
</div>

<div class="mid-sidebar">
</div>

<div class="right-sidebar">
</div>

</div>

<div class="footer-wrapper">FOOTER
</div>

</body>

额外说明：如果需要Header固定在顶部不随页面滚动消失，只需要给.header-wrapper添加position: sticky; top:0; z-index:10;属性即可。

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