如何让iframe内容决定CSS Grid Item的高度？

方案一：动态适配内容高度（推荐） #

因为你同时拥有父页面和iframe的控制权，用postMessage传递内容高度是最灵活的方式，适配动态变化的内容：

1. 调整Grid容器行高
   修改父页面的SCSS，将包含#section04的Grid行高度设为auto，让行高跟随内容自适应：

.grid-container {
  display: grid;
  // 假设原来的行定义类似这样，把对应#section04的行从1fr改为auto
  grid-template-rows: auto auto auto auto auto;
  // 或者用grid-auto-rows: auto; 让所有行自动适配内容
}

2. iframe页面发送高度消息
   在iframe的HTML中添加JS，监听内容高度变化并发送给父页面：

// 计算并发送当前内容高度
function updateParentHeight() {
  const contentHeight = document.documentElement.scrollHeight;
  window.parent.postMessage(
    { type: 'updateIframeHeight', height: contentHeight },
    '*' // 建议替换为父页面的具体域名提升安全性
  );
}

// 页面加载完成后发送一次
window.addEventListener('load', updateParentHeight);

// 监听内容动态变化（如AJAX加载、元素展开/折叠）
const mutationObserver = new MutationObserver(updateParentHeight);
mutationObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

3. 父页面接收并调整iframe高度
   在父页面的JS中监听消息，更新iframe的高度：

window.addEventListener('message', (event) => {
  // 验证消息来源（可选但推荐）
  // if (event.origin !== 'https://your-iframe-domain.com') return;
  
  if (event.data.type === 'updateIframeHeight') {
    const iframe = document.querySelector('#section04 iframe');
    iframe.style.height = `${event.data.height}px`;
  }
});

4. 清除不必要的固定高度设置
   确保#section04没有固定高度或溢出隐藏的设置：

#section04 {
  height: auto; // 移除固定height值
  overflow: visible; // 避免内容被截断
}

#section04 iframe {
  width: 100%;
  border: none; // 可选，移除默认边框
}

方案二：静态适配（内容高度固定时使用） #

如果iframe内容高度是固定不变的，可以直接设置iframe高度，同时让Grid行自适应：

.grid-container {
  grid-template-rows: auto auto auto auto auto; // #section04所在行设为auto
}

#section04 iframe {
  width: 100%;
  height: 800px; // 替换为iframe内容的实际高度
}

方案三：CSS原生适配（限浏览器支持） #

利用CSS的height: max-content让Grid Item自动撑开，同时iframe使用height: 100%：

.grid-container {
  grid-template-rows: auto auto auto auto auto;
}

#section04 {
  height: max-content;
}

#section04 iframe {
  width: 100%;
  height: 100%;
}

注意：max-content在部分旧浏览器中支持有限，需要确认项目兼容范围。

完成以上设置后，#section04会跟随iframe内容高度自动撑开，#section05也不会再和它重叠。

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