为啥 iframe 比 body 大？ iframe在100vh时添加垂直滚动条[重复]

Posted 2023-03-05

【中文标题】为啥 iframe 比 body 大？ iframe在100vh时添加垂直滚动条[重复]

【英文标题】：Why iframe is bigger than body? iframe adds vertical scrollbar when 100vh [duplicate]为什么 iframe 比 body 大？ iframe在100vh时添加垂直滚动条[重复]

【发布时间】：2018-01-06 23:14:39

【问题描述】：

假设我有非常简单的标记。我希望 iframe 占据屏幕高度的 100%，但设置 100vh 仍会添加滚动条。

* 
  box-sizing: border-box;


body 
  margin: 0;


iframe 
  width: 100%;
  height: 100vh;

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

但我看到垂直滚动条。为什么会显示以及如何摆脱它？

【问题讨论】：

因为身高。

默认情况下，body 有 padding 和 maging。尝试在 iframe 中将其设为 0

【参考方案1】：

假设您希望它是全屏的：

添加display:block; 添加'allowfullscreen' 属性。

改为：

<iframe scr="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen></iframe>

【讨论】：

添加 allowfullscreen 根本没有帮助我。去掉高度是无意义的。它将如何帮助我获得 100% 的 iframe 高度？

【参考方案2】：

您可以简单地解决此问题，只需将float:left 或display:block 添加到iframe 即可

* 
  box-sizing: border-box;


body 
  margin: 0;


iframe 
  width: 100%;
  height: 100vh;
  padding:0;
  display:block;

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

【讨论】：

只想添加这样的答案。也许还添加一个“溢出：隐藏；” - 但这个答案应该会像魅力一样发挥作用。

溢出隐藏可能是移除 iframe 结束

接受display: block的回答。

@JishnuVS 你能删除-moz-box-sizing、-webkit-box-sizing 和所有这些供应商的东西吗？它们适用于非常旧的浏览器。

【参考方案3】：

iframe 具有默认的display: inline，因此将display 属性更改为display: block 可以解决此问题。

此外，如果iframe 是弹性项目（弹性容器的子项，在当前情况下为body 添加display: flex 将使iframe 成为弹性项目）它也会有所帮助，因为它将被隐式阻塞。

【参考方案4】：

您无法控制跨域内容的高度。如果您尝试将一个外包 html 页面上传到您的 html 页面中，则您无法控制内容大小，只有在您有权访问源内容或服务器的情况下。然后你可以添加一些 JS 并且你不会有额外的滚动。

https://github.com/davidjbradshaw/iframe-resizer

【讨论】：

我不想控制域内容的高度。我只希望iframe 获得 100% 的屏幕高度，而不管内容如何。

这就是问题所在：“无论内容如何”。您无法知道 iframe 内容高度是多少。

没关系。我想设置 100% 的屏幕高度。

我已经按照你说的做了，把它设为 100%，但是你将你的 div 设置为 100%，它不会显示 100%。

也许你会在这里找到解决方案：***.com/questions/5867985/…

【参考方案5】：

请检查这个。

* 
  box-sizing: border-box;


body 
  margin: 0;


iframe 
  width: 100%;

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

【讨论】：

不，我希望 iframe 占据屏幕高度的 100%，更新问题。

好的，使用 float:left;

谢谢，目前唯一有效的答案。你能解释一下为什么会这样吗？