208

所有浏览器都支持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高度？

15 回答

41

<iframe src =“”style =“top：0; left：0; width：100％; height：100％; position：absolute; border：none”> </ iframe>

回复于 2024-05-06T17:41:23+08:00

您可以使用frameset作为先前的答案状态，但如果您坚持使用iFrame，则以下2个示例应该有效：

<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％，这会强制页面外的滚动条，因为主体没有滚动条 - 一个人可能不希望iframe超出页面的界限 . 这会全屏隐藏iFrame的滚动条！

回复于 2024-05-06T17:41:23+08:00

3创建全屏iframe的方法：

方法1 - 视口百分比长度

在supported browsers中，您可以使用viewport-percentage lengths，例如 height: 100vh .

其中 100vh 表示视口的高度，同样 100vw 表示宽度 .

Example Here

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>

方法2 - 固定定位

这种方法非常简单 . 只需设置 fixed 元素的位置并添加 height / width 为 100% .

Example Here

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

<iframe></iframe>

方法3

对于最后一个方法，只需将 body / html / iframe 元素的 height 设置为 100% .

Example Here

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>

回复于 2024-05-06T17:41:23+08:00

244
1.将您的DOCTYPE更改为不太严格的内容 . 不要使用XHTML;这太傻了 . 只需使用HTML 5 doctype就可以了：
```
<!doctype html>
```
2.您可能需要确保（取决于浏览器）iframe的父级具有高度 . 而它的父母 . 而它的父母 . 等等：
```
html, body { height: 100%; }
```
回复于 2024-05-06T17:41:23+08:00
25
我遇到了同样的问题，我把一个iframe拉成了一个div . 试试这个：
```
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
```
高度设置为100vh，代表视口高度 . 此外，宽度可以设置为100vw，但如果源文件响应（您的帧将变得非常宽），您可能会遇到问题 .
回复于 2024-05-06T17:41:23+08:00

这对我来说效果非常好（仅当iframe内容来自 same domain 时）：

<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>

回复于 2024-05-06T17:41:23+08:00

150

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>

回复于 2024-05-06T17:41:23+08:00

除了Akshit Soota的答案之外：它是import并显式设置每个父元素的高度，也是表的高度，如果有的话 column ：

<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>

回复于 2024-05-06T17:41:23+08:00

You first add css

html,body{
height:100%;
}

This will be the 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>

回复于 2024-05-06T17:41:23+08:00

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/
回复于 2024-05-06T17:41:23+08:00

以下测试工作

<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>

回复于 2024-05-06T17:41:23+08:00

0
根据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像素作为高度 .

工作代码：Link工作地点：Link
回复于 2024-05-06T17:41:23+08:00

构建流体全屏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&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;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>

回复于 2024-05-06T17:41:23+08:00

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>

回复于 2024-05-06T17:41:23+08:00

只有这对我有用（但对于“同域”）：

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);" ....

回复于 2024-05-06T17:41:23+08:00

全屏iframe，高度为100％

15 回答

3创建全屏iframe的方法：

方法1 - 视口百分比长度

方法2 - 固定定位

方法3

构建流体全屏iframe的另一种方法：

嵌入视频在页面加载时填充整个视口区域

示例：

相关问题