如何实现o-body自适应动态高度o-footer并支持内容滚动

纯CSS用Flex弹性布局就能实现，不需要写JS计算高度，可自动适配动态高度的header和footer，中间区域自动填充剩余空间且支持滚动。

修改逻辑 #

• 外层容器改为纵向flex容器，保留原有固定高度即可
• 移除o-body、o-footer原有绝对定位属性，不需要手动给o-body写死高度
• 给o-body设置flex: 1让它自动占据header、footer之外的所有剩余空间，保留纵向滚动配置
• 给header、footer设置flex-shrink: 0，避免内部内容过多时被挤压变形

完整可运行代码 #

CSS样式 #

.o-container {
  position: relative;
  height: 200px;
  /* 新增flex布局配置 */
  display: flex;
  flex-direction: column;
}

.o-header {
  position: relative;
  vertical-align: top;
  flex-shrink: 0; /* 头部高度随内容自适应，不被挤压 */
}

.o-body { 
  /* 移除原有绝对定位和固定高度 */
  overflow-y: auto; /* 内容超出时才显示滚动条，体验优于scroll */
  flex: 1; /* 核心属性：自动填充剩余空间 */
}

.o-footer {     
  /* 移除原有绝对定位和bottom属性 */
  flex-shrink: 0; /* 底部高度随内部按钮数量自适应，不被挤压 */
}

HTML结构 #

原有HTML结构不需要任何调整，直接替换CSS即可生效：

<div class="o-container">
  <div class="o-header">
   <div>
    headerrow1
    </div>
    <div>
    headerrow2
    </div>
  </div>
  
  <div class="o-body">
    <div>
    bodyrow1
    </div>
    <div>
    bodyrow2
    </div>
    <div>
    bodyrow3
    </div>
    <div>
    bodyrow4
    </div>
    <div>
    bodyrow5
    </div>
     <div>
    bodyrow6
    </div>
    <div>
    bodyrow7
    </div>
    <div>
    bodyrow8
    </div>
  </div>
  
  <div class="o-footer">
  <div data-bind="foreach: buttons">    
   <div>
    footerrow1
    </div>
    <div>
    footerrow2
    </div>
  </div>
  </div>
</div>

该方案兼容所有现代浏览器，不管后续header新增多少行内容、footer内buttons集合渲染多少个元素，o-body都会自动调整高度适配，内容超出区域时自动出现滚动条，不会出现内容遮挡、高度溢出的问题。
如果项目需要兼容极老旧不支持flex的浏览器，再考虑通过JS监听DOM变化，动态计算header、footer高度给o-body赋值即可，flex是目前成本最低、维护性最好的实现方式。

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