grid布局main区域可滚动div受max-height限制无法占满可用空间

核心问题原因 #

• grid布局的main区域作为父容器，没有明确的高度约束，也未设置溢出规则，导致子元素的height:100%没有可参照的高度基准，无法正常生效。
• 可滚动div固定设置了max-height:265px，强制限制了容器最大高度，无法适配不同设备的可用空间高度。

修改步骤 #

1. 给grid-area: main的容器添加min-height: 0属性（grid子元素默认min-height为auto，会被内容撑开导致高度溢出），同时设置overflow: hidden为子元素提供高度参照。
2. 删除可滚动div的固定max-height:265px属性，添加box-sizing: border-box避免padding撑高容器导致溢出。

修改后完整代码 #

<div style="display: grid; grid-template-areas: 'header' 'main' 'footer';
      grid-auto-rows: auto 1fr auto;
      grid-template-columns: 100%;
      height: 100vh;
      text-align: center;
      margin: -18px -24px 0px -24px; border: 0px; padding:0px ">

  <div style="grid-area: header; background-color: green; margin: 0px; border: 0px; padding: 0px">
    <br />

  </div>

  <div style="grid-area: main; background-color: blue; min-height: 0; overflow: hidden; ">
    <!-- 现在可占满main区域全部可用空间 -->
    <div style="height: 100%; overflow-y: scroll; padding: 20px; min-height:15px; box-sizing: border-box;">
      Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space

    </div>

  </div>

  <div style="color: black; background-color: black; grid-area: footer; padding: 10px; text-align: center">
    some footer content

  </div>

</div>

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