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