如何用CSS根据searchContainer高度设置listContainer高度实现局部滚动

当然可以通过CSS计算listContainer的高度，核心是利用calc()函数实现高度计算，同时配置滚动属性让列表容器单独滚动，具体实现如下：

1. 调整后的CSS代码 #

/* 确保根元素和body高度生效，让.parent的100%高度有参考 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.parent {
  height: 100%;
  overflow: hidden; /* 防止父容器出现滚动条 */
}

.searchContainer {
  height: 60px; /* 替换为你实际的搜索容器高度 */
  padding: 10px;
  box-sizing: border-box; /* 内边距不额外增加元素高度 */
  position: sticky;
  top: 0;
  background: #fff; /* 避免被列表内容遮挡 */
}

.listContainer {
  /* 用calc计算高度：父容器高度 - 搜索容器高度 */
  height: calc(100% - 60px);
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 10px;
  box-sizing: border-box;
}

.list-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

2. 关键要点说明 #

• calc()函数：直接通过calc(100% - 60px)计算列表容器高度，注意减号前后必须保留空格，否则CSS解析会出错。
• overflow-y: auto：仅让列表容器在内容超出时显示滚动条，避免整个父容器滚动导致搜索框被隐藏。
• position: sticky：让搜索框固定在顶部，配合白色背景防止被列表内容遮挡，增强视觉体验。
• box-sizing: border-box：确保内边距和边框不会额外增加元素高度，保证calc()计算的准确性。

3. 对应HTML结构（无需修改原结构） #

<div class="parent">
  <div class="searchContainer">
    <input placeholder="Enter search string">
  </div>
  <div class="listContainer">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
    <div class="list-item">3</div>
    <div class="list-item">4</div>
    <div class="list-item">5</div>
    <div class="list-item">6</div>
    <div class="list-item">7</div>
    <div class="list-item">8</div>
    <div class="list-item">9</div>
    <div class="list-item">10</div>
    <div class="list-item">11</div>
    <div class="list-item">12</div>
    <div class="list-item">13</div>
    <div class="list-item">14</div>
    <div class="list-item">15</div>
    <div class="list-item">16</div>
  </div>
</div>

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