如何基于document.scrollHeight而非clientHeight设置页面网格高度？

首先明确：纯CSS无法让网格布局自动感知脱离文档流的position: absolute元素高度，因为绝对定位元素不参与文档流的布局计算，父容器（包括网格）不会将其高度纳入自身尺寸计算。不过可以通过一些变通方案来近似实现需求：

1. 改用粘性定位替代固定定位，适配滚动高度 #

如果你的header和footer不需要严格固定在视口（仅需滚动时保持在顶部/底部），可以用position: sticky替代固定定位，同时将网格容器的最小高度设为视口高度，允许其随文档滚动需求自动扩展：

html, body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100; /* 确保在popover上方 */
}
main {
  position: relative; /* 若popover基于main定位 */
}
footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 99; /* 让popover可显示在footer上方 */
}
/* 给popover设置更高层级，避免被遮挡 */
.popover {
  z-index: 101;
}

这种方案下，当popover内容超出视口需要滚动时，网格容器会自动扩展高度，footer会被推至文档底部；当页面内容较少时，footer仍会保持在视口底部。

2. 为内容容器添加预估内边距（仅适用于popover高度可预判场景） #

如果popover的最大高度可预估，可以给中间内容容器添加足够的padding-bottom，确保popover内容不会超出页面范围：

main {
  padding-bottom: 800px; /* 设置为popover的最大预估高度 */
}

但该方案灵活性差，无法适配高度动态变化的popover。

结论 #

如果必须严格基于document.scrollHeight设置网格高度，且popover是无法修改的绝对定位元素，纯CSS无法实现完全自动适配——因为CSS无法直接获取或响应scrollHeight的动态变化。这种情况下仍需JavaScript监听popover高度变化，动态调整网格容器尺寸。

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