Html 自动设置 iframe 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15255858/
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
set the iframe height automatically
提问by user1415780
I need to embed an HTML page inside a frame, and am using the following code:
我需要在框架内嵌入一个 HTML 页面，并使用以下代码：
<iframe src="http://www.google.com" style="width: 90%; height: 300px"
scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
vspace="0" hspace="0">
I am trying to make the height set to auto so that the frame auto resizes to the page length without having to hardcode the height as I am doing here. I tried height:autoand height:inheritbut it did not work.
我试图将高度设置为自动，以便框架自动调整到页面长度，而不必像我在这里所做的那样对高度进行硬编码。我试过了height:auto，height:inherit但没有用。
回答by Golda
Try this coding
试试这个编码
<div>
<iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
width: 100%; position: absolute;"></iframe>
</div>
回答by Solomon Antoine
If you a framework like Bootstrap you can make any iframe video responsive by using this snippet:
如果您使用像 Bootstrap 这样的框架，您可以使用以下代码段使任何 iframe 视频响应：
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>
回答by user323774
Solomon's answer about bootstrap inspired me to add the CSS the bootstrap solution uses, which works really well for me.
Solomon 对 bootstrap 的回答启发了我添加 bootstrap 解决方案使用的 CSS，这对我来说非常有效。
.iframe-embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.iframe-embed-wrapper {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.iframe-embed-responsive-16by9 {
padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
<iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>
回答by jcaponi
If the sites are on separate domains, the calling page can't access the height of the iframe due to cross-browser domain restrictions. If you have access to both sites, you may be able to use the [document domain hack].1Then anroesti's links should help.
如果站点位于不同的域中，由于跨浏览器域的限制，调用页面无法访问 iframe 的高度。如果您可以访问这两个站点，则可以使用 [document domain hack]。1那么 anroesti 的链接应该会有所帮助。
