Question

以下iframe是一个弹性项目，应该拉伸并填充可用空间：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Flex Iframe</title>
    <style>
        body {
            display: flex;
            margin: 0;
            height: 100vh;
        }
        span {
            background: green;
        }
        iframe {
            background: tan;
        }
    </style>
</head>

<body>
    <span>Hello, world!</span>
    <iframe></iframe>
</body>

</html>

但是在IE11看起来不太合适：
的 DEMO

这是一个错误吗？什么是跨浏览器解决方案？

Answer 1

这很简单：

iframe {
            min-height: 100%;
        }

<强> DEMO

Answer 2

来自：Default width/height of an IFrame

的 Demo

“......我在dev-tech-layout mailing list找到了答案 - 这是CSS规范的一部分。默认比例是 2：1 .. 。“

“... 300px 的默认宽度在CSS规范的最后一段中定义，the width of inline replaced elements上的部分......”


否则，如果'width'的计算值为'auto'，但是没有   满足上述条件，然后使用'width'的值   300像素。如果300px太宽而不适合设备，UA应该使用   宽度最大的矩形，比例为2：1，适合   而不是设备。

“... 150px 的默认高度在CSS规范的最后一段中定义，the height of inline replaced elements上的部分......”


否则，如果'height'的计算值为'auto'，但没有   满足上述条件，则必须设置'height'的使用值   到具有2：1比例的最大矩形的高度，有一个   高度不大于150px，并且宽度不大于   设备宽度。

你没有给iframe加上高度，所以它在IE中采用iframe的原始高度尝试下面

body { display: flex; margin: 0; height: 100vh; } span { background: green; } iframe { background: tan; height: 100vh; /* this is required to give it height in IE */ border:0; /* toavoid vertical scroll */ }

这是

Demo

使用calc作为高度，现代浏览器支持calc

CSS

body { display: flex; margin: 0; height: calc(100vh - 50px); flex-direction: column; } span { background: green; height:calc(100vh - 50px); } iframe { background: tan; height: calc(100vh - 50px); /* this is required to give it height */ border:0; /* to avoid vertical scroll */ } header { background: yellow; height:50px; } main { display: flex; flex: 1; }

的 Final Demo

使用一些jquery来实现相同的

的jQuery

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler: $(window).on('resize', function () { var demoheight = $(window).height() - $('header').height(); $("body, iframe, span").css("height", demoheight); }).trigger('resize'); // Another way to do that same thing // $(document).ready(myfunction); // $(window).on('resize', myfunction); // function myfunction() { // var demoheight = $(window).height() - $('header').height(); // $("body, iframe, span").css("height", demoheight); // } // Another technique is to`.trigger()`one event inside the other: // $(window).on('resize', function () { // var demoheight = $(window).height() - $('header').height(); // $("body, iframe, span").css("height", demoheight); // }); // $(document).ready(function () { // $(window).trigger('resize'); // });

CSS

body { display: flex; margin: 0; flex-direction: column; } span { background: green; } iframe { background: tan; border:0; } header { background: yellow; } main { display: flex; flex: 1; }

Answer 3

看这个小提琴http://jsfiddle.net/grrenier/cm4f3/1/

您可以使用固定的身体位置，并使用％来表示所有元素。这是代码：

HTML：

<header>Some text</header>
<span>Hello, world!</span>
<iframe></iframe>

CSS：

body {
    position:fixed;top:0;left:0;width:100%;height:100%;
    margin: 0;
}
header {
    background: yellow;
    width:100%;
    height:5%;
    float:left;
}
span {
    background: green;
    float:left;
    width:15%;
    height:95%;
}
iframe {
    background: tan;
    width:85%;
    height:95%;
    border:0;
}

您不需要使用<main>标签，但如果您使用它，您也可以使用固定位置。

这是使用<main>代码http://jsfiddle.net/grrenier/chT8F/

的另一个小提琴

HTML：

<header>Some text</header>
<main>
<span>Hello, world!</span>
<iframe></iframe>
</main>

CSS：

body {
    position:fixed;top:0;left:0;width:100%;height:100%;
    margin: 0;
}
header {
    background: yellow;
    width:100%;
    height:5%;
    float:left;
}
span {
    background: green;
    float:left;
    width:15%;
    height:100%;
}
iframe {
    background: tan;
    width:85%;
    height:100%;
    border:0;
    float:left;
}
main {float:left;height:95%;width:100%;}

Answer 4

将display: inline-block添加到范围
在iframe周围添加div并将其设为display: flex
将flex-direction: column添加到div
将flex: 1应用于iframe。

<强>示例：

Simple

More complex

Answer 5

让iframe填充父级..在chrome，ie和edge中工作。

min-height：100％; 是ie的关键。

<td rowspan="9" style="position:relative;padding:0;width:270px;">
    <iframe class="readonly" style="position:absolute;width:100%;min-height:100%;top:0;bottom:0;right:0;left:0;" src="page.php"></iframe>
</td>

Flex iframe在IE11中不会延伸

5 个答案: