页面缩放时iframe无法滚动到底部，内容截断问题求助

问题分析 #

当前代码里，html、body和.container都设置了height:100%，但页面上方还有<h1>、<h2>、<p>等元素占据垂直空间，导致总内容高度超过视口高度。而html/body的height:100%限制了滚动范围，父级滚动条无法触达页面底部；同时iframe设置了scrolling=no，内部超出部分直接被截断。

解决方案 #

方案1：Flex布局自适应剩余空间（推荐）

通过Flex布局让容器自动占据页面剩余高度，无需手动计算元素高度：

html, body {
  margin: 0; /* 清除默认边距 */
  min-height: 100vh; /* 保证至少占满视口高度 */
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1; /* 占据除去上方元素外的剩余空间 */
  width: 100%;
}
.responsive-iframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除默认边框 */
}

HTML保持原有结构即可。这种方式会让.container自动适配剩余高度，上方标题和段落不会挤压iframe空间，页面滚动条也能覆盖全部内容。

方案2：手动计算容器高度（适合固定高度场景）

如果需要保留height:100%的设置，可用calc()计算容器高度，减去上方元素的总高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距 */
}

.container {
  position: relative;
  width: 100%;
  overflow: visible;
  height: calc(100% - 150px); /* 替换150px为上方元素的实际总高度 */
}
.responsive-iframe {
  width: 100%;
  height: 100%;
}

注意：该方法需要手动测量上方元素高度，当元素高度因响应式布局变化时，需同步调整数值，灵活性较差。

跨域iframe的额外说明 #

由于你加载的是外部域名的iframe内容，受浏览器同源策略限制，无法通过JavaScript获取iframe内部内容的真实高度。如果iframe内部内容高度超过容器高度，scrolling=no会导致内容截断。这种情况下，若无法控制iframe源，建议：

• 适当增大容器高度，预留足够空间
• 移除scrolling=no，允许iframe内部滚动

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