iframe全宽高视图问题

【问题标题】：Iframe full width and height view problemiframe全宽高视图问题
【发布时间】：2022-01-16 20:07:18
【问题描述】：

我尝试在覆盖整个页面的页面上使用 iframe。如下图所示，它的高度和宽度不是 100%。有什么问题？

&lt;iframe style="border: solid 0px;" id="iframe" src="https://www.bing.com/search?q=" width="100%" height="100%"&gt;`

【问题讨论】：

【解决方案1】：

问题是height: 100% 不起作用！百分比高度不适用于父高度取决于项目高度的项目。换句话说，如果父母的身高是准确确定的，那么 % 将适用于孩子。

在您的情况下，解决方案是使用vh 而不是%。更多信息：https://www.w3schools.com/cssref/css_units.asp

vh 单位：相对于视口高度的 1%*

<iframe id="iframe" src="https://www.bing.com/search?q=" style="width: 100%; height: 90vh; border: 0;">

【讨论】：