是否所有浏览器都支持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高度?
当前回答
尝试使用jquery，
$('iframe').on('`enter code here`load', function(){
$(this).css('height', $(this).contents().find('body').height());
});
其他回答
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>
你可以使用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的全宽度滚动条!
身体{ 保证金:0;/*重置默认margin */ ｝ iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 身高:100 vh;/*视口相对单元*/ 宽度:100大众; ｝ < iframe > < / iframe >
我遇到了同样的问题，我拉一个iframe到一个div。试试这个:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为100vh，代表视口高度。此外，宽度可以设置为100vw，尽管你可能会遇到问题，如果源文件是响应性的(你的帧将变得非常宽)。
这是一个简洁的代码。它依赖于jquery方法来查找当前窗口高度。在iFrame加载时，它设置iFrame的高度与当前窗口相同。然后为了处理页面大小的调整，body标记有一个onresize事件处理程序，它在文档调整大小时设置iframe的高度。
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
下面是一个工作示例:http://jsbin.com/soqeq/1/
