CSS vh属性导致iframe持续异常增大的原因排查

核心问题出在iframe中vh的计算逻辑和你的动态高度调整机制形成了正反馈循环：

• 在iframe内部，vh单位是相对于iframe自身的视口高度（也就是父页面设置的iframe高度），而非父页面的视口。
• 你的逻辑是：iframe每隔3秒把内部body高度传给父页面，父页面据此调整iframe高度。当你给#mainContainer加了min-height:75vh后，触发了以下循环：
  1. 父页面设置iframe高度为H → iframe视口高度等于H。
  2. 若页面内容高度与75vh（即0.75*H）的总和超过了iframe视口高度H，body会被撑到更大的高度H'。
  3. 父页面收到H'后，把iframe高度调整为H' → 此时iframe视口高度变为H'，75vh对应的像素值变成0.75*H'，比之前的0.75*H更大。
  4. 重复步骤2-3，iframe高度就会持续增长，形成你看到的指数级变大的现象。

举个具体例子：

• 初始iframe高度=500px → 75vh=375px。
• 若你的内容高度是200px，加上min-height:75vh后，#mainContainer高度为375px，再加上body默认margin、其他元素高度，总高度达到550px，超过了iframe初始高度。
• 父页面把iframe高度改成550px → 新的75vh=412.5px，#mainContainer高度变为412.5px，加上其他元素后body高度又涨到600px左右。
• 循环往复，iframe高度就会越来越大。

• 避免在iframe内部使用依赖iframe视口高度的单位（比如vh）来设置容器最小高度，改用%（基于父元素高度）或者固定像素值。
• 如果必须使用视口相关单位，可以通过JavaScript动态计算75vh对应的父页面视口高度（而非iframe视口），再设置为容器高度。
• 调整动态高度逻辑：在iframe内部计算body高度时，排除min-height:75vh的影响，或者设置一个高度上限，避免循环增长。

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