iFrame 高度到完整内容 [重复]

Posted 2023-03-05

【中文标题】iFrame 高度到完整内容 [重复]

【英文标题】：iFrame Height To Full Content [duplicate]

【发布时间】：2019-06-15 22:14:05

【问题描述】：

我有一个网站，我想有效地在顶部和下方创建一个横幅，以完整地显示另一个网站，而页面内没有额外的滚动条。所以我考虑过 iframe 但我无法让它正确显示。我希望页面加载到从属页面内容的完整高度并相应地进行更改。我想要尽可能简单的代码以避免混淆，因为我对此的理解是有限的。这是我尝试过的代码

   <iframe src="https://edition.cnn.com/"   scrolling="no">

您的浏览器不支持 iframe。

如果我输入 5000 作为高度，我可以在没有固定滚动框架的情况下显示大部分页面。如果我将 100% 作为 iframe 高度，则 iframe 非常短，例如 150 高（猜测），不知道为什么它默认为这个小尺寸，如果它是 100%。

那么有没有我可以添加到上面的代码，以便它自动将 iframe 调整到它正在显示的内容的完整高度。

非常感谢任何指针。

谢谢

p.s 我使用 cnn 纯粹是为了举例。

【问题讨论】：

嗨，Travis 欢迎来到 ***。对于否决您的问题的人，请下次添加评论，以便 OP 了解 OP 做错了什么。 Travis 请参考以下内容：***.com/help/how-to-ask 如果您需要更多帮助，请添加更多（上下文）代码，以便 *** 上的人员可以为您提供有关如何改进代码或使其工作的信息、提示或答案。

“我使用 cnn 纯粹是为了举例。” — example.com example.net 和 example.org 仅用于示例目的，请勿使用任意其他网站。

【参考方案1】：

如果您尝试将高度设置为 100%，这将意味着该元素将尝试在给定元素的父元素的给定属性中适合 100%。例如，如果 iframe 高度设置为 100%，并且父元素的高度为 400 像素 (400px)，并且给定的父元素中不存在其他元素，则 iframe 将具有完全相同的大小（不是计算可能出现的任何空白）。

参考我的小提琴：

.iframe-container 
  height: 400px;

<div class="banner">
  Banner
</div>
<div class="iframe-container">
  <iframe src="https://edition.cnn.com/"   scrolling="no">
    
  </iframe>
</div>
<div class="something-else">
  Add here something else eventually...
</div>

JSFiddle

在此示例中，高度必须以（父）元素上的像素表示，类名为iframe-container，以便为 iframe 分配高度。

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。