Html 如何根据其内容使 iframe 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49253341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Make iframe 100% height according to its content
提问by Anthony Kung
I had seen a lot of people asking how to make iframe 100% height. That can be easily archived using some CSS. It will make the iframe display 100% as relative to the device screen. But how to make iframe 100% height according to its content?
我见过很多人问如何使 iframe 100% 高度。可以使用一些 CSS 轻松存档。它将使 iframe 相对于设备屏幕显示 100%。但是如何根据其内容使 iframe 100% 高度？
Here's my current code to make 100% iframe according to device screen:
这是我当前根据设备屏幕制作 100% iframe 的代码：
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
} <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>The allowfullscreenand position:absolutedidn't help except for crashing my site's template. This is the best I can do without crashing the primary CSS. Please help...
在allowfullscreen和position:absolute没有除了撞毁我的网站模板的帮助。这是我在不破坏主 CSS 的情况下能做的最好的事情。请帮忙...
Edit: The iframe content is responsive using
编辑：iframe 内容响应使用
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
so preset height using javascript didn't work too. Perhaps is there a way of using height units instead?
所以使用javascript预设高度也不起作用。也许有一种使用高度单位的方法？
em, ex, remetc? Or make it a specific percentage of vw?
em, ex,rem等等？或者使它成为特定的百分比vw？
回答by Mr.ZZ
There is no CSS only way to set iframe height according to its content. You need to use JavaScript to get iframe content height and then set as iframe height.
没有 CSS 唯一的方法可以根据其内容设置 iframe 高度。您需要使用 JavaScript 获取 iframe 内容高度，然后设置为 iframe 高度。
how to achieve this using JavaScript answered and well explained in the following questions:
如何使用 JavaScript 实现这一点在以下问题中得到了回答和很好的解释：
回答by Web Designer
Try to set positionto fixed, like this:
尝试设置position为fixed，如下所示：
height: 100%;
width: 100%;
position:fixed;
Or like this:
或者像这样：
height: 100vh;
width: 100vw;
position:fixed;
