Html 如何使 iframe 的宽度和高度与其父 div 相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18765762/
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 width and height of iframe same as its parent div?
提问by Rohita Khatiwada
I have a iframe inside a div. I want the size of iframe to be exactly the size of its parent div. I used following code to set the width and height of iframe.
我在 div 中有一个 iframe。我希望 iframe 的大小与其父 div 的大小完全相同。我使用以下代码来设置 iframe 的宽度和高度。
<iframe src="./myPage.aspx" id="myIframe"
style="position: relative;
height: 100%;
width: 100%'
scrolling='no'
frameborder='0'">
But width of iframe is not same as div, also both horizontal and vertical scrollbar are displayed.
但是 iframe 的宽度与 div 不同，水平和垂直滚动条也会显示。
回答by avrahamcool
you have a lot of typos.
你有很多错别字。
a correct markup should be like:
正确的标记应该是这样的：
<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
style="position: relative; height: 100%; width: 100%;">
...
</iframe>
also, if this frame already has an ID, why don't you put this in CSSlike this (from a separate stylesheet file):
另外，如果这个框架已经有一个 ID，你为什么不把它像这样放在CSS 中（来自一个单独的样式表文件）：
#myIframe
{
position: relative;
height: 100%;
width: 100%;
}
and HTML
和HTML
<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>
mind that scrolling& frameborderare iframeattribute, not styleattribute.
请注意scrolling&frameborder是iframe属性，而不是style属性。
回答by Chris Michaelides
Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:
由于我们处于 CSS3 时代，您可以通过使用视口单位来做到这一点。这些单位允许您根据视口宽度和视口高度的百分比指定大小。这是用户的视口，也称为屏幕。但是，在我尝试过的所有主要浏览器中，如果将 iframe 放在另一个 div 内并相对定位的 div 中，则视口单位是相对于该 div 的。由于 100 个视口高度单位意味着 100% 的高度，您可以这样做：
<div id="parent">
<div id="wrapper" style="position:relative">
<iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
</div>
</div>
I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.
我发现这是最好的解决方案，因为它是跨域的，并且完全按照您的需要显示，没有任何 javascript 或其他复杂的东西。
And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!
最重要的是，它适用于所有浏览器，甚至是移动浏览器（在 android 和 iphone 上测试）！
回答by Mohan Dere
To set dynamic height -
设置动态高度 -
- We need to communicate with cross domain iFrames and parent
- Then we can send scroll height/content height of iframe to parent window
- 我们需要与跨域 iFrames 和 parent 通信
- 然后我们可以将 iframe 的滚动高度/内容高度发送到父窗口
1 For communication
1 用于通讯
I prefer - https://ternarylabs.github.io/porthole/
我更喜欢 - https://ternarylabs.github.io/porthole/
2 Implementation
2 实施
To detect iframe height change - Uses https://marcj.github.io/css-element-queries/
检测 iframe 高度变化 - 使用https://marcj.github.io/css-element-queries/
<script src="https://raw.githubusercontent.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://raw.githubusercontent.com/ternarylabs/porthole/master/src/porthole.min.js"></script>
For rest of the implementation refer gist -
对于其余的实现，请参阅要点 -
https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
Parent window:
父窗口：
(function(){
'use-strict';
//This soultion we have used - https://ternarylabs.github.io/porthole/
// example -
var iFrameId: 'guestFrame',
window.onload = function(){
// Create a proxy window to send to and receive
// messages from the iFrame
var windowProxy = new Porthole.WindowProxy(
'http://other-domain.com/', iFrameId);
var $viewPort = $('#'+iFrameId);
// Register an event handler to receive messages;
windowProxy.addEventListener(function(messageEvent) {
if( messageEvent.data.height == $viewPort.height() ){
return;
}
$viewPort.height(messageEvent.data.height);
});
Porthole.WindowProxyDispatcher.start();
};
})();
iframe window:
iframe 窗口：
(function(){
'use-strict';
/**
* Iframe to Parent window communication
* sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
* </iframe>
* Uses https://ternarylabs.github.io/porthole/
* Uses https://marcj.github.io/css-element-queries/
*/
window.onload = function(){
var proxy = window.proxy = new Porthole.WindowProxy('http://parent-domain.com/');
proxy.addEventListener(function(messageEvent) {
// handle event
});
//Height setup
var iframeHeight = 0;
var element = document.getElementsByTagName("BODY")[0];
new ResizeSensor(element, function() {
var scrollHeight = $('body').outerHeight();
if (iframeHeight === scrollHeight) return false;
iframeHeight = scrollHeight;
proxy.post({
height: scrollHeight,
});
});
Porthole.WindowProxyDispatcher.start();
};
})();
