IFRAME 不会在 IE8 中显示 100% 高度，但在 IE11 和 Firefox 中可以正常显示

Question

我有一个 HTML 页面，在 div 中有一个 iframe。 iframe 高度应为可用 window 高度的 100%。这在 IE11 和 Firefox 中按预期显示，但在 IE8 中 iframe 保持固定大小，无论 window 大小或 iframe 内容如何。当浏览器全屏时，这大约是屏幕的 1/3 space。

这是 IE8 的怪癖吗？如何让 iframe 消耗 100% 高度？

浏览器未处于兼容模式。

缩减示例：

html{
   height:100%;
}
body {
    display:table;
    width:100%;
    height:100%; 
}

.row{
    display:table-row;
    height:100%; 
}

.iframeContainer{
    height:100%;
    width:100%;
}

.iframeContainer iframe{
    width:100%; 
    height:100%; 
    border-style:solid !important; 
    border:2px; 
}

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <div class="row">
                <div class="iframeContainer">
                    <iframe></iframe>
                </div>
            </div>
        </body>
    </html>

Answer 1

你可以试试

 height: 100vh;

这将使 iframe 成为视口高度的 100%

Answer 2

您只能使用 CSS 条件注释定位 IE8 和更低版本的 IE 浏览器。

Method -1

<!--[if lte IE 8]>
<style type="text/css">
* html, body { height: 100%; width:100%; margin:0; padding:0; }
iframe { padding-bottom: 0; height:100%; }

</style>
<![endif]-->

Method -2

html, body{
height: 100%;
margin: 0;
padding: 0;
}

Method -3

<iframe width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" src="/chatbox/testb.html"></iframe>

100% height iframe with content

Still 100% height iframe without content.

Answer 3

<!DOCTYPE html>
<html>
    <head>
    <style type=text/css>

        html,body{ padding:0;margin:0 }

        html{
           height:100%;
        }

        body {
            display:table;
            width:100%;
            height:100%; 
            position:relative;
            background-color:lightcoral;
        }

        .row{
            display:table-row;
            height:100%; 
            /*width:100%*/
        }

        .iframeContainer{
            /*height:100%;*/    /* use h+w instead of positioning below if outer (coral) frame is undesired */
            /*width:100%;*/
            /*display:table-cell;*/
            position:absolute;top:0;right:0;bottom:0;left:0;margin:1em;
        }

        iframe{
            width:100%;
            height:100%;
            border-style:solid !important; 
            border:2px; 
        }
    </style>
    </head>
    <body>
        <div class="row">
            <div class="iframeContainer">
                <iframe src="about:blank" onload="this.contentDocument.body.style.backgroundColor='lavender'" frameborder=0></iframe>
            </div>
        </div>
    </body>
</html>

如果我理解您将 body 设置为 display:table 的目的，那是为了居中。我更愿意 table 使用 position: top,right,bottom,left=0 技术作为 CSS 2.1 认可的 hack。我想无论完成什么工作。

在 IE8 中使用 table 技巧，它需要显示 iframeContainer 包装器：table-cell。否则，正如您所解释的，它无法计算宽度+高度，然后基于它的 iframe w+h 不起作用。但即使使用 table-cell 包装器，它仍然使宽度 + 高度难以管理，并且不会稍微溢出视口。这是一个实验：table-cell demo

Without totally changing your table strategy, we can still slip positioning into the style and get IE8 to work. In doing so, it automatically sizes the box within the viewport without overflowing it. In the above markup, I went a step further and framed the table with a 1em coral boundary. (because it was easy at that point). Here it is online: table-cell positioned

IFRAME 不会在 IE8 中显示 100% 高度，但在 IE11 和 Firefox 中可以正常显示

IFRAME won't display 100% height in IE8, but fine in IE11 and Firefox

html

css

iframe

internet-explorer

internet-explorer-8