【问题标题】:iFrame Height To Full Content [duplicate]iFrame 高度到完整内容 [重复]
【发布时间】:2019-06-15 22:14:05
【问题描述】:

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

   <iframe src="https://edition.cnn.com/" width="100%" height="100%" scrolling="no">

您的浏览器不支持 iframe。

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

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

非常感谢任何指针。

谢谢

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

【问题讨论】:

  • 嗨,Travis 欢迎来到 Stackoverflow。对于否决您的问题的人,请下次添加评论,以便 OP 了解 OP 做错了什么。 Travis 请参考以下内容:stackoverflow.com/help/how-to-ask 如果您需要更多帮助,请添加更多(上下文)代码,以便 stackoverflow 上的人员可以为您提供有关如何改进代码或使其工作的信息、提示或答案。
  • “我使用 cnn 纯粹是为了举例。” — example.com example.netexample.org 仅用于示例目的,请勿使用任意其他网站。

标签: html iframe


【解决方案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/" width="700px" height="100%" scrolling="no">
    
  </iframe>
</div>
<div class="something-else">
  Add here something else eventually...
</div>

JSFiddle

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

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-11-06
  • 2012-08-03
  • 2010-12-18
  • 2014-09-29
  • 2012-05-21
  • 2012-11-19
  • 2016-06-13
相关资源
最近更新 更多