如何设置仅让可变高度top bar与bottom navigation间的Grid List滚动？

这个需求其实挺典型的，尤其是当顶部栏或底部导航需要动态调整高度（比如显示/隐藏元素、加载内容）时，用CSS的Flexbox或者Grid布局就能完美解决，而且代码非常直观。

方案一：Flexbox 实现（推荐，兼容性好） #

核心思路是把整个页面容器设置为垂直方向的Flex布局，让顶部栏和底部导航不压缩、自适应内容高度，中间区域自动填充剩余空间并开启滚动。

HTML 结构示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 先重置默认样式，避免边距干扰 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden; /* 防止页面整体滚动 */
    }

    /* 页面容器：垂直Flex，占满视口高度 */
    .page-container {
      display: flex;
      flex-direction: column;
      height: 100vh; /* 或者 100%，视情况选择 */
    }

    /* 顶部栏：自适应高度，不被压缩 */
    .top-bar {
      flex-shrink: 0; /* 关键：防止被中间区域挤压缩小 */
      background: #f0f0f0;
      padding: 1rem;
      /* 这里可以加动态内容，比如按钮、弹窗，高度会自动变化 */
    }

    /* 中间滚动区域：填充剩余空间，超出滚动 */
    .grid-list-container {
      flex: 1; /* 关键：占据容器剩余的所有空间 */
      overflow-y: auto; /* 垂直方向滚动，内容超出时显示滚动条 */
      padding: 1rem;
    }

    /* 底部导航：自适应高度，不被压缩 */
    .bottom-nav {
      flex-shrink: 0; /* 同样防止被压缩 */
      background: #e0e0e0;
      padding: 1rem;
      /* 动态添加/隐藏元素时，高度会自动调整 */
    }

    /* 模拟Grid列表样式，可替换成你的实际样式 */
    .grid-item {
      height: 80px;
      background: #fff;
      border: 1px solid #ddd;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      padding: 0 1rem;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <div class="top-bar">
      <!-- 动态内容：比如按钮、搜索框，甚至条件显示的div -->
      <button onclick="toggleExtraContent()">切换顶部额外内容</button>
      <div id="extra-top-content" style="display:none; margin-top:1rem;">这是动态显示的顶部内容，会改变顶部栏高度</div>
    </div>

    <div class="grid-list-container">
      <!-- 这里放你的Grid List内容，比如大量卡片 -->
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
      <div class="grid-item">Grid Item 5</div>
      <div class="grid-item">Grid Item 6</div>
      <div class="grid-item">Grid Item 7</div>
      <div class="grid-item">Grid Item 8</div>
      <div class="grid-item">Grid Item 9</div>
      <div class="grid-item">Grid Item 10</div>
    </div>

    <div class="bottom-nav">
      <!-- 动态内容：比如导航按钮、提示信息 -->
      <button onclick="toggleBottomExtra()">切换底部额外内容</button>
      <div id="extra-bottom-content" style="display:none; margin-top:1rem;">这是动态显示的底部内容，会改变底部栏高度</div>
    </div>
  </div>

  <script>
    // 模拟动态改变顶部栏高度的操作
    function toggleExtraContent() {
      const el = document.getElementById('extra-top-content');
      el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }

    // 模拟动态改变底部栏高度的操作
    function toggleBottomExtra() {
      const el = document.getElementById('extra-bottom-content');
      el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }
  </script>
</body>
</html>

关键说明 #

• flex-shrink: 0：给顶部栏和底部导航设置这个属性，确保它们不会因为中间区域的内容而被压缩，始终保持自身内容的高度。
• flex: 1：中间区域设置这个属性，会自动填充页面容器中顶部和底部栏之外的所有剩余空间。
• overflow-y: auto：当中间区域的内容高度超过可用空间时，自动显示垂直滚动条，仅该区域滚动，页面整体不会滚动。

方案二：Grid 实现（更简洁，适合现代浏览器） #

如果你的项目不需要兼容旧版浏览器（比如IE11及以下），用Grid布局会更简洁：

CSS 核心代码 #

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.page-container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 顶部自适应，中间占满剩余，底部自适应 */
  height: 100vh;
}

.top-bar, .bottom-nav {
  /* 无需额外设置，Grid的auto行会自动适应内容高度 */
  background: #f0f0f0;
  padding: 1rem;
}

.grid-list-container {
  overflow-y: auto;
  padding: 1rem;
}

/* 模拟Grid列表样式 */
.grid-item {
  height: 80px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

关键说明 #

• grid-template-rows: auto 1fr auto：直接定义了三行的高度规则，auto会自动适配内容高度，1fr会占据剩余的所有空间，完美适配顶部/底部栏的动态高度变化。
• 中间区域同样设置overflow-y: auto开启滚动，逻辑和Flexbox一致。

注意事项 #

• 确保html和body的margin、padding都重置为0，并且高度设置为100%，避免出现不必要的边距或滚动条。
• 如果中间区域内有嵌套的Grid布局，注意不要让内部容器的高度超出父容器，否则可能影响滚动效果。
• 两种方案都能完美支持你提到的“隐藏/添加div”等动态操作，因为顶部和底部栏的高度会自动根据内容调整，中间区域始终占据剩余空间。

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