为什么iframe比身体更大？ iframe在100vh

Question

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

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

iframe {
  width: 100%;
  height: 100vh;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是我看到了垂直滚动条。为什么要展示以及如何摆脱它？

Answer 1

您只需修复此问题，只需向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>

Answer 2

假设您希望全屏显示：

1. 添加display:block;
2. 添加'allowfullscreen'属性。

更改为：

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

Answer 3

iframe默认为display: inline，因此将display属性更改为类似display: block的内容可解决此问题。

如果iframe是弹性项目（flex-container的子级，在当前情况下为display: flex添加body将使iframe成为弹性项目）它也会帮助，因为它会被隐含地封锁。

Answer 4

请检查一下。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

iframe {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

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

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