如何防止自动高度行在 CSS 网格中扩展

Question

我目前有一个非常简单的设计，三个区域垂直排列，类似于 header-body-foot。中心区自动溢出，长这样：

并且当中心区域内容的高度超过容器的高度时：

在旧版网站中，上下区域的高度是固定像素的，中心区域的高度是我计算得到的calc(100vh - 24px - 80px)（简化）。

现在我正在将站点的所有布局转换为 CSS 网格，这通常很容易。然而，在这个简单的页面上，我无法实现网格的中心区域相对于浏览器具有自动高度window，同时，当内容超过此高度时显示滚动条。

这是一个简化的 html:

<html>
  <body>
    <div class='container'>
      <div class='area1'>
        Toolbar
      </div>
      <table class='area2'>
        <tbody>
          <tr>
            <td><input type='checkbox' checked></td>
            <td>Cell content 1</td>
          </tr>
          <tr>
            <td><input type='checkbox'></td>
            <td>Cell content 2</td>
          </tr>
          <tr>
            <td><input type='checkbox'></td>
            <td>Cell content 3</td>
          </tr>

          <!--append here many rows-->

        </tbody>
      </table>
      <div class='area3'>
        Details
      </div>
    <div>
  </body>
</html>

和css：

.container {
    height: 100vh; /*I need to respect always this height*/
    display: grid;
    gap: 2px;
    grid-template-rows: 24px 1fr 80px;
    grid-template-areas: "area1" "area2" "area3";
}
.area1 {
    grid-area: area1;
    border: solid 1px;
}
.area2 {
    grid-area: area2;
    overflow-y: auto;
    border: solid 1px;
}
.area3 {
    grid-area: area3;
    border: solid 1px;
}

有了这个新布局和大量 table 行，中心区域 (table) 向下扩展，而不是像这样具有固定高度和滚动条：

我需要的是：

中心区域必须始终保持相同的高度，并且在需要时必须显示滚动条。
下部区域必须始终在浏览器中可见window（如开头的两个图像）。

我也用 grid-template-rows: 24px minmax(100px, 1fr) 80px 和 24px auto 80px 试过了。

有什么方法可以使用 CSS 网格得到它吗？

Answer 1

问题出在 table 本身。它不能很好地适应网格布局（至少在这种情况下）。

我建议您将 table 包裹在 div 中，使 div 成为网格项。

现在似乎可以工作了。

.container {
  height: 100vh;
  /*I need to respect always this height*/
  display: grid;
  gap: 2px;
  grid-template-rows: 24px 1fr 80px;
  grid-template-areas: 
          "area1"
          "area2"
          "area3";
}

.area1 {
  grid-area: area1;
  border: solid 1px;
}

.area2 {
  grid-area: area2;
  overflow-y: auto;
  border: solid 1px;
}

.area3 {
  grid-area: area3;
  border: solid 1px;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class='container'>
  <div class='area1'>
    Toolbar
  </div>
  <div class="area2">
    <table>
      <tbody>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class='area3'>
    Details
  </div>
  <div>

如何防止自动高度行在 CSS 网格中扩展

How to prevent an automatic height row from expanding in a CSS Grid

css

css-grid