fixed定位侧边栏设置h-100子元素后底部div不显示如何解决

为第一个div添加的h-100类会强制元素占满父容器.vertical-side的100%高度，此时两个子元素的总高度为「100%父容器高度 + 第二个div的100px」，超出fixed定位父容器的可视范围，第二个div被挤到容器外部，自然无法正常显示。

直接借助Bootstrap自带的Flex布局工具类即可实现「上部div自适应占满剩余高度、底部div固定100px高度」的效果，不需要复杂的自定义样式：

• 给父容器.vertical-side添加d-flex flex-column类，将其设置为纵向弹性布局容器
• 移除第一个div上的h-100类，替换为flex-grow-1，该类会让元素自动填充父容器内的剩余可用空间
• 如果上部区域内容较多需要滚动，给第一个div追加overflow-auto类即可
• 给底部固定高度的div设置flex-shrink: 0，避免内容过多时底部固定高度的块被弹性布局压缩变形

完整代码示例 #

CSS代码 #

.vertical-side {
  width: 250px;
  z-index: 1001;
  background: #fbfaff;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 0;
  border-right: 1px solid #e9e9ef;
}

.second {
  height: 100px;
  border-top: 1px solid #e9e9ef;
  flex-shrink: 0;
}

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side d-flex flex-column">
  <div class="first flex-grow-1 overflow-auto">
    First div
  </div>
  <div class="second">
    second div
  </div>
</div>

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