Question

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

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

您的浏览器不支持

iframe。

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

所以我可以在上面添加代码，以便它自动将iframe调整为所显示内容的全部高度。

非常感谢任何指针。

谢谢

p.s我纯粹是出于示例目的使用cnn。

Answer 1

如果您尝试将高度设置为100％，则意味着该元素将尝试使100％适应给定元素的父元素的给定属性。因此，例如，如果将iframe的高度设置为100％，并且父元素的高度为400像素（400像素），并且给定的父元素中没有其他元素，则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分配高度。

iFrame高度到完整内容

1 个答案: