CSS Grid中Details展开时布局跳动及标题空间优化问题

本文所讨论的问题与另一类似布局问题并非同一情况

需求描述 #

我需要构建网站顶部Hero区域布局，具备以下特性：

• 该区域需占满整个屏幕高度
• 区域内元素垂直对齐
• 包含标题、<details>元素、副标题等内容
• 采用CSS Grid布局

初始示例代码 #

CSS

.hero {
  display: grid;
  min-height: 100vh;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  > * {
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
  }
  details {
    place-content: start;
  }
}

HTML

<div class="hero">
  <h1>title</h1>
  <details>
    <summary>details</summary>
    <p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
  </details>
  <h2>subtitle</h2>
</div>

问题说明 #

为填满屏幕高度，需至少将一行高度设为1fr，但遇到两难情况：

• 若将<details>元素所在行设为1fr，标题会被压缩至顶部；
• 若将标题所在行设为1fr（即修改为grid-template-rows: 1fr auto auto;），展开<details>时标题与summary文本位置会跳动。

如何实现标题占用最大空间，同时避免Details展开时布局跳动？

解决方案 #

核心思路 #

让标题行占据剩余空间保证垂直居中，给<details>行设置固定最小高度并启用内部滚动，避免行高变化导致布局跳动。

修改后代码 #

CSS

.hero {
  display: grid;
  min-height: 100vh;
  grid-template-columns: auto;
  /* 标题行占剩余空间，details行取内容最小高度，副标题行自适应 */
  grid-template-rows: 1fr min-content auto;
}

.hero > * {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
}

.hero details {
  place-content: start;
  /* 限制最大高度，内容超出时滚动 */
  max-height: 60vh;
  overflow-y: auto;
  /* 确保收起状态的高度作为行高基准 */
  min-height: fit-content;
}

HTML

<div class="hero">
  <h1>title</h1>
  <details>
    <summary>details</summary>
    <p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
  </details>
  <h2>subtitle</h2>
</div>

原理说明 #

1. grid-template-rows: 1fr min-content auto;：标题行用1fr占据剩余空间，保证标题垂直居中且占用最大可用空间；min-content让details行默认高度等于其收起状态的高度，展开时不会改变行高；副标题行自适应内容高度。
2. max-height + overflow-y: auto：限制details的最大高度，避免内容过多时挤占其他元素空间，同时提供滚动能力查看全部内容。
3. min-height: fit-content：确保details收起时的高度作为行的最小高度，防止行高被意外压缩。

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