是否所有浏览器都支持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高度?
当前回答
以下测试工作
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
其他回答
另一种构建流体全屏iframe的方法:
当页面加载时，嵌入式视频填充整个视口区域
很好的方法登陆页面与视频或任何嵌入式内容。您可以有任何额外的内容下面嵌入视频，这是显示时，滚动页面向下。
例子:
CSS和HTML代码。
body { margin: 0; background-color: #E1E1E1; } header { width: 100%; height: 56vw; max-height: 100vh; } .embwrap { width: 100%; height: 100%; display: table; } .embwrap .embcell { width: auto; background-color: black; display: table-cell; vertical-align: top; } .embwrap .embcell .ifrwrap { height: 100%; width: 100%; display: inline-table; background-color: black; } .embwrap .embcell .ifrwrap iframe { height: 100%; width: 100%; } <header> <div class="embwrap"> <div class="embcell"> <div class="ifrwrap"> <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe> </div> </div> </div> </header> <article> <div style="margin:30px; text-align: justify;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p> <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p> </div> </article>
你可以使用frameset作为前面的答案，但如果你坚持使用iFrames，以下两个例子应该工作:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
另一个:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
隐藏滚动2个替代方案如上所示:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
用第二个例子来破解:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
为了隐藏iFrame的滚动条，父元素被设置为overflow: hidden来隐藏滚动条，iFrame的宽度和高度被设置为150%，这迫使滚动条在页面之外，由于主体没有滚动条，人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!
1. 将DOCTYPE更改为不那么严格的内容。不要使用XHTML;这是愚蠢的。只要使用HTML 5文档类型就可以了:
<!doctype html>
2. 您可能需要确保(取决于浏览器)iframe的父对象有一个高度。和它的父结点。和它的父结点。等:
html, body { height: 100%; }
尝试使用jquery，
$('iframe').on('`enter code here`load', function(){
$(this).css('height', $(this).contents().find('body').height());
});
这对我来说非常有用(除非iframe内容来自同一个域):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
