是否所有浏览器都支持iframe height=100% ?
我使用doctype作为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的iframe代码中，如果我说
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它是否会取剩下的页面的高度(因为上面有另一个固定高度为50px的帧) 所有主流浏览器(IE/Firefox/Safari)都支持这个功能吗?
同样关于滚动条，即使我说scrolling="no"，我也能在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置iframe高度?
当前回答
除了Akshit Soota的回答之外: 显式地设置每个父元素的高度是importand，如果有的话，还包括表和列的高度:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
其他回答
http://embedresponsively.com/
这是一个很好的资源，我用过几次，效果很好。创建以下代码....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
只有这对我有用(但对于“同一域”):
function MakeIframeFullHeight(iframeElement){
iframeElement.style.width = "100%";
var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height ); // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
if(margins=="") { margins=0; ifrD.body.style.margin="0px"; }
(function(){
var interval = setInterval(function(){
if(ifrD.readyState == 'complete' ){
iframeElement.style.height = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
setTimeout( function(){ clearInterval(interval); }, 1000 );
}
},1000)
})();
}
你可以使用任何一种:
MakeIframeFullHeight(document.getElementById("iframe_id"));
or
<iframe .... onload="MakeIframeFullHeight(this);" ....
如果你的父元素<div>用这里提到的多重解填充高度。
那你也可以用
<div style="display:flex;">
<iframe style="flex:1 1 0%;" src="..."></iframe>
</div>
尝试使用jquery，
$('iframe').on('`enter code here`load', function(){
$(this).css('height', $(this).contents().find('body').height());
});
除了Akshit Soota的回答之外: 显式地设置每个父元素的高度是importand，如果有的话，还包括表和列的高度:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
