如何在100vh弹出侧边菜单中动态调整目录div高度适配搜索场景

嘿，这个需求用CSS Flexbox就能轻松搞定，完全不用手动计算高度，让布局自己动态调整就好！我给你一套完整的实现方案：

核心思路 #

用Flexbox的垂直布局来管理侧边菜单的空间分配：

• 菜单容器固定100vh高度，禁止整体滚动
• 搜索框固定高度（或自适应内容），不参与动态压缩
• 目录和搜索结果放在一个弹性容器里，默认目录占满剩余空间；搜索时显示结果，让两者自动分配剩余空间，保证都完整显示

代码实现 #

HTML结构

<!-- 弹出侧边菜单容器 -->
<div class="sidebar-menu">
  <!-- 搜索框区域 -->
  <div class="search-box">
    <input type="text" id="searchInput" placeholder="输入关键词搜索...">
  </div>
  <!-- 动态内容区：目录 + 搜索结果 -->
  <div class="content-wrapper">
    <!-- 目录容器 -->
    <div class="toc">
      <h3>文章目录</h3>
      <ul>
        <li>入门指南</li>
        <li>核心功能</li>
        <li>进阶技巧</li>
        <li>常见问题</li>
      </ul>
    </div>
    <!-- 搜索结果容器（默认隐藏） -->
    <div class="search-results" id="searchResults">
      <h3>搜索结果</h3>
      <ul>
        <li>入门指南 - 快速上手</li>
        <li>核心功能 - 高级配置</li>
      </ul>
    </div>
  </div>
</div>

CSS样式

/* 侧边菜单基础样式 */
.sidebar-menu {
  height: 100vh;
  width: 320px;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止菜单整体滚动 */
  position: fixed; /* 作为弹出菜单的定位，按需调整 */
  top: 0;
  left: 0;
}

/* 搜索框样式：固定高度，不被压缩 */
.search-box {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  flex-shrink: 0; /* 确保搜索框不会被压缩 */
}

.search-box input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* 动态内容区：占满菜单剩余空间 */
.content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 目录默认样式：占满内容区 */
.toc {
  flex-grow: 1; /* 默认占满内容区，对应需求的80vh左右 */
  padding: 1rem;
  overflow-y: auto; /* 如果目录内容过多，可开启内部滚动；不需要的话删掉此行 */
}

.toc h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #495057;
}

.toc ul {
  list-style: none;
  padding-left: 0;
}

.toc li {
  padding: 0.4rem 0;
  cursor: pointer;
  color: #212529;
}

/* 搜索结果默认隐藏 */
.search-results {
  display: none;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  flex-shrink: 0; /* 确保结果完整显示，不被压缩 */
}

.search-results h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #007bff;
}

/* 搜索激活时的样式：显示结果，调整目录高度 */
.sidebar-menu.search-active .search-results {
  display: block;
}

.sidebar-menu.search-active .toc {
  flex-grow: 0; /* 目录不再占满空间，自适应内容高度 */
  /* 如果想让目录和结果平分剩余空间，把上面一行换成下面的：
  flex-grow: 1;
  */
}

JavaScript逻辑

const searchInput = document.getElementById('searchInput');
const sidebarMenu = document.querySelector('.sidebar-menu');
const searchResults = document.getElementById('searchResults');

// 监听搜索框输入事件
searchInput.addEventListener('input', function(e) {
  const query = e.target.value.trim();
  
  if (query) {
    // 激活搜索状态，显示结果
    sidebarMenu.classList.add('search-active');
    // 这里可以添加实际的搜索逻辑，比如根据query生成结果列表
  } else {
    // 取消搜索状态，隐藏结果
    sidebarMenu.classList.remove('search-active');
  }
});

关键说明 #

1. Flexbox布局：通过flex-direction: column让菜单元素垂直排列，flex-grow和flex-shrink控制空间分配，完全避免硬编码高度的麻烦。
2. 无滚动保证：菜单容器设置overflow: hidden，搜索框和搜索结果用flex-shrink:0防止被压缩，目录默认占满剩余空间，搜索时自动调整高度，确保所有内容都在100vh内显示。
3. 灵活性：如果需要目录和搜索结果平分剩余空间，只需要把搜索激活时目录的flex-grow:0改成flex-grow:1即可，非常灵活。

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