Flex的IFRAME不IE11舒展

以下iframe是柔性项目，应该伸展和填充可用空间：Flex的IFRAME不IE11舒展

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

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

来源

2014-04-22 Mori

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

这很简单：

iframe { 
      min-height: 100%; 
     }

DEMO

来源

2014-05-02 16:30:51

我有一个类似的问题：在iframe中存在样式标记使iframe的高度缩小。它只影响Internet Explorer，但是这个解决方案修复了它。 –

来自：Default width/height of an IFrame

Demo

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

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

否则，如果‘宽’有‘自动’的计算值，但没有的上述条件得到满足，那么'宽度'的使用值将变成012px300px。如果300px太宽而不适合该设备，则UA应使用具有2：1比例的最大矩形的宽度，而不是适合设备。

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

否则，如果 '高度' 有计算的值为'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 */ 
}

这

使用 calc身高

Demo

，现代浏览器都支持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; 
}

来源

2014-04-22 11:07:50 4dgaurav

感谢您的回答，但如果事情变得像[this]（http://jsfiddle.net/Mori/Fm8C3/17/）那么复杂？ – Mori

如果我可以给头部一个固定的高度，你的解决方案就可以工作。但在我的情况下，标题内容和高度不固定，这就是为什么我使用灵活的布局。 – Mori

我希望我的最终编辑使用一些jQuery将有所帮助。 – 4dgaurav

看看这个小提琴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%;}

来源

2014-04-30 14:09:27 Ragnar

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

添加display: inline-block的跨度
添加一个div周围的iframe和让它display: flex
将flex-direction: column添加到div
将flex: 1应用于iframe。

例子：

Simple

More complex

来源

2014-05-01 16:43:17

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

查看我更新的答案。 –

要有一个iframe填充父项..在铬，ie和边缘工作。

最小高度：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>

来源

2017-07-31 15:20:11

Flex的IFRAME不IE11舒展

回答

相关问题