iframe flex html函数,html - Flex iframe doesn't stretch in IE11 - Stack Overflow

"...I found the answer on the dev-tech-layout mailing list -- it's part of the CSS spec. The default ratio is 2:1..."

"...The default width of 300px is defined in the last paragraph of the CSS spec, section on the width of inline replaced elements..."

Otherwise, if 'width' has a computed value of 'auto', but none of the

conditions above are met, then the used value of 'width' becomes

300px. If 300px is too wide to fit the device, UAs should use the

width of the largest rectangle that has a 2:1 ratio and fits the

device instead.

"...The default height of 150px is defined in the last paragraph of the CSS spec, section on the height of inline replaced elements..."

Otherwise, if 'height' has a computed value of 'auto', but none of the

conditions above are met, then the used value of 'height' must be set

to the height of the largest rectangle that has a 2:1 ratio, has a

height not greater than 150px, and has a width not greater than the

device width.

You not given height to iframe so its taking the original height of iframe in IE try below

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 */

}

Here it is

using the calc for height, modern browsers support 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;

}

Use of a some jquery to achieve the same

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;

}