如何实现含搜索框与三个可变高度列表的自适应侧边栏

最优解决方案：使用Flexbox弹性布局 #

完全不需要硬编码各类vh比例数值，所有高度分配规则由浏览器自动计算，天然适配你提的所有布局要求。

实现思路 #

• 侧边栏外层容器设为纵向flex布局，高度直接继承父容器高度即可（如果是全屏侧边栏再设height: 100vh也没问题，不影响内部逻辑）
• 搜索框设flex-shrink: 0固定高度，不会被挤压，你可以根据需求保留7vh或者改成固定像素值，后续修改也不需要调整其他容器的数值
• 列表外层容器设flex: 1，自动占满搜索框之外的所有可用高度，不需要手动计算93vh这类数值
• 第一个列表容器设flex: 1 1 50%，内容充足时默认占用50%的列表区域高度，内容不足时自动收缩到内容实际高度，加overflow: auto实现内容超出时自动出滚动条
• 第二、第三个列表放在同一个纵向flex的父容器内，该父容器同样设flex: 1 1 50%，和第一个列表平分可用高度；内部两个列表各设flex: 1，默认各占父容器一半高度，如果其中一个列表为空，仅需给空列表设置最小高度（等于标题高度即可），另一个列表会自动占满剩余高度

示例代码 #

<!-- 侧边栏外层容器 -->
<div class="sidebar">
  <!-- 搜索框 -->
  <input class="search-input" type="text" placeholder="搜索">
  <!-- 列表总容器 -->
  <div class="list-wrapper">
    <!-- 第一个列表 -->
    <div class="list list-1">
      <h3>列表1标题</h3>
      <div class="list-content">
        <!-- 列表内容 -->
      </div>
    </div>
    <!-- 第二、第三个列表的父容器 -->
    <div class="bottom-list-wrapper">
      <div class="list list-2">
        <h3>列表2标题</h3>
        <div class="list-content">
          <!-- 列表内容 -->
        </div>
      </div>
      <div class="list list-3">
        <h3>列表3标题</h3>
        <div class="list-content">
          <!-- 列表内容为空也不影响布局 -->
        </div>
      </div>
    </div>
  </div>
</div>

.sidebar {
  height: 100%; /* 或者100vh，根据你的外层布局调整 */
  display: flex;
  flex-direction: column;
}
.search-input {
  flex-shrink: 0;
  height: 7vh; /* 也可以改成固定像素比如48px，后续修改不需要调整其他代码 */
}
.list-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内部滚动带动外层 */
}
.list {
  display: flex;
  flex-direction: column;
}
.list-content {
  flex: 1;
  overflow: auto; /* 内容超出自动出滚动条 */
}
.list-1 {
  flex: 1 1 50%;
  min-height: 32px; /* 最少保留标题高度，可根据实际标题高度调整 */
}
.bottom-list-wrapper {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}
.list-2, .list-3 {
  flex: 1;
  min-height: 32px; /* 最少保留标题高度，空列表时也会显示标题 */
}

方案优势 #

• 没有魔数硬编码，所有高度自动分配，后续修改搜索框高度、标题高度都不需要调整其他容器的数值
• 天然适配空列表场景：如果其中一个列表内容为空，仅保留标题高度，另一个列表会自动占满可用高度
• 滚动逻辑内置，不需要额外判断内容高度

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