如何为内部区块实现垂直滚动？仅让.body内容滚动而.header保持固定

我来帮你搞定这个滚动布局的问题！你想要的效果是让容器里的Header固定在顶部，只有Body区域的内容在超出时能垂直滚动，对吧？你的现有代码有几个小问题，我来帮你调整成符合需求的版本：

问题分析 #

你的原代码里，#container同时设置了overflow:hidden和overflow-y:auto，这会导致属性冲突；另外.body用height:inherit会继承容器的完整高度，但容器里还有Header元素，这样Body的高度会超出容器范围，无法正确触发滚动。

修正后的完整代码 #

<style>
#container {
  display: flex;
  flex-direction: column;
  max-height: 50%;
  overflow: hidden;
  border: 1px solid red;
}

.header {
  /* 让Header根据内容自动撑开高度，固定在顶部 */
}

.body {
  flex: 1; /* 自动占据容器剩余的所有空间 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

.item {
  padding: 20px;
  height: 70px;
  border-bottom: 1px solid #ccc;
}
</style>

<div id="container">
 <div class="header"> Header </div>
 <div class="body">
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
   <div class="item"> Item </div>
 </div>
</div>

关键调整说明 #

• 给Header添加了.header类，方便我们明确区分固定区域和滚动区域；
• #container使用Flex布局（display:flex + flex-direction:column），让内部元素垂直排列，这是实现剩余空间分配最简洁的方式；
• .body设置flex:1，表示它会自动占据容器中Header以外的所有剩余空间，不用手动计算高度；
• 给.body设置overflow-y:auto，只有当Body里的内容超出分配的空间时，才会显示垂直滚动条，Header则始终固定在容器顶部。

这样调整后，就能完美实现你想要的“仅Body内容滚动、Header固定”的效果啦！

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