所有浏览器都支持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高度？
答案 0 :(得分：247)
你可以使用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>
Hack第二个例子：
<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％，这会强制页面外的滚动条，因为body没有滚动条可能不会指望iframe超出页面的边界。这会以全宽隐藏iFrame的滚动条！
答案 1 :(得分：152)
iframe的3种方法：在supported browsers中，您可以使用height: 100vh，例如100vh。
其中100vw表示视口的高度，同样body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}表示宽度。
<iframe></iframe>fixed
这种方法非常简单。只需设置height元素的定位，然后添加width的{{1}} / 100%。
iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}<iframe></iframe>
对于最后一种方法，只需将height / body / html元素的iframe设置为100%。
html, body {
height: 100%;
margin: 0; /* Reset default margin on the body element */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
width: 100%;
height: 100%;
}<iframe></iframe>
答案 2 :(得分：42)
1。将您的DOCTYPE更改为不太严格的内容。不要使用XHTML;这太傻了。只需使用HTML 5 doctype就可以了：
<!doctype html>
2。您可能需要确保（取决于浏览器）iframe的父级具有高度。而它的父母。而它的父母。等：
html, body { height: 100%; }
答案 3 :(得分：28)
我遇到了同样的问题，我把一个iframe拉成了一个div。试试这个：
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为100vh，代表视口高度。此外，宽度可以设置为100vw，但如果源文件响应（您的帧将变得非常宽），您可能会遇到问题。
答案 4 :(得分：25)
这对我来说效果非常好（仅当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>
答案 5 :(得分：6)
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
答案 6 :(得分：5)
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>
答案 7 :(得分：2)
除了Akshit Soota的答案之外： 明确设置每个父元素的高度，以及表格列（如果有）的高度非常重要：
<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>
答案 8 :(得分：2)
您首先添加css
html,body{
height:100%;
}
这将是html：
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
答案 9 :(得分：2)
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">
</iframe>
答案 10 :(得分：1)
这是一个简洁的代码。它依赖于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/
答案 11 :(得分：1)
根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe，不再允许使用百分比值。 但以下对我有用
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
虽然width:100%有效但height:100%不起作用。所以window.innerHeight已被使用。您还可以使用css像素作为高度。
答案 12 :(得分：1)
以下经过测试的工作方式
<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>
答案 13 :(得分：0)
这是一个很好的资源，并且运作得非常好，我曾几次使用它。创建以下代码....
<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>
答案 14 :(得分：0)
您可以调用一个函数，该函数将在加载iframe时计算iframe的身体高度：
<script type="text/javascript">
function iframeloaded(){
var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
}
</script>
<iframe onload="iframeloaded()" src=...>
答案 15 :(得分：0)
只有这对我有用（但对于＆＃34;同域＆＃34;）：
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"));
或
<iframe .... onload="MakeIframeFullHeight(this);" ....
答案 16 :(得分：0)
iframe的方法：viewport区域
使用视频或任何嵌入内容登录网页的好方法。您可以在嵌入视频下方添加任何其他内容，这在滚动页面时会显示。
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>
答案 17 :(得分：-1)
要在 iframe 内获得没有滚动条的全屏 iframe，请使用以下 css。什么都不需要
iframe{
height: 100vh;
width: 100vw
}
iframe::-webkit-scrollbar {
display: none;
}