Flex iframe 在 IE11 中无法拉伸答案

【问题标题】：Flex iframe doesn't stretch in IE11Flex iframe 在 IE11 中无法拉伸
【发布时间】：2014-06-06 16:06:11
【问题描述】：

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

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

【问题讨论】：

使用 javascript 获取可用的宽度和高度，并使用给定的值设置 iframe。如果在调整窗口大小时它也应该工作，请使用事件监听器来更改 iframe 的宽度/高度。

标签： html css internet-explorer iframe flexbox

【解决方案1】：

这很简单：

iframe {
            min-height: 100%;
        }

DEMO

【讨论】：

我遇到了类似的问题：iframe 中的样式标签使 iframe 的高度缩小。它只影响了 Internet Explorer，但这个解决方案修复了它。

【解决方案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 比例的最大矩形的高度，具有高度不大于 150 像素，宽度不大于设备宽度。

你没有给 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;
}

【讨论】：

感谢您的回答，但如果事情变得像this 这样有点复杂怎么办？
如果我可以给标题一个固定的高度，你的解决方案就可以工作。但在我的情况下，标题内容和高度不是固定的，这就是我使用灵活布局的原因。

【解决方案3】：

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

您可以对 body 使用 position fixed 并为所有元素使用 %。这是代码：

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

【讨论】：

如果我可以给标题一个固定的高度，你的解决方案就可以工作。但在我的情况下，标题内容和高度不是固定的，这就是我使用灵活布局的原因。跨度和 iframe 宽度也是如此。

【解决方案4】：

将display: inline-block 添加到跨度
在 iframe 周围添加一个 div 并使其成为 display: flex
将flex-direction: column添加到div
将flex: 1 应用于 iframe。

示例：

Simple

More complex

【讨论】：

第二个演示中的额外滚动条是什么？

【解决方案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>

【讨论】：