Question

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

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

浏览器未处于兼容模式。

缩减示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS条件注释仅定位IE8及更少版本的IE浏览器。

方法-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]-->

方法-2

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

方法-3

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

内容
的100％高度iframe

enter image description here

仍然100％高度的iframe没有内容。

enter image description here

Answer 2

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

如果我理解你设置正文显示的目的：table，它是为了居中。我更习惯使用位置：技术有top，right，bottom，left = 0作为CSS 2.1支持hack。无论做什么工作，我猜。

使用表技巧 IE8 ，需要显示iframeContainer包装：表细胞即可。另外，正如你解释的那样，它无法计算宽度+高度，然后基于它的iframe w + h不起作用。但即使使用表格单元格包装，它仍然会使宽度+高度难以管理，而不会略微溢出视口。这是一个实验：table-cell demo

如果没有完全改变你的桌面策略，我们仍然可以将定位放入样式并让IE8工作。这样，它会自动调整视口中的框大小而不会溢出它。在上面的标记中，我更进一步，用1em珊瑚边界框了桌子。（因为那时很容易）。这是在线：table-cell positioned

Answer 3

你可以尝试

 height: 100vh;

这会使iframe成为视口高度的100％

IFRAME在IE8中不会显示100％的高度，但在IE11和Firefox中都很好

3 个答案: