Menu
I'm having some trouble figuring out how to extend an iframe to 100% of it's container element in Firefox and IE (it works fine in Chrome). From searching around, it makes sense that there has to be a height specified on the containing div (and possibly body and html as well). However, I have done that, and the iframe is still not extending. Do all of the parent divs have to have a specified height and position for this to work, or just the containing parent? Any fix for this would be greatly appreciated!
Here's what I have:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {margin:0; padding:0; height:100%}
#container {width: 1000px; min-height: 550px; position: relative}
#smallContainer {position:relative} /*no height specified*/
#iframeContainer {height: 100%; position: relative}
#iframe {height: 100%; width: 100%; display: block}
</style>
</head>
<body>
<div id="container">
<div id="smallContainer">
<div id="iframeContainer">
<iframe id="iframe" src="foo.com"></iframe>
</div>
</div>
</div>
</body>
</html>
716
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
You might need a combination of..
$(function(){
var height = window.innerHeight;
$('iframe').css('height', height);
});
//And if the outer div has no set specific height set..
$(window).resize(function(){
var height = window.innerHeight;
$('iframe').css('height', height);
});
Try this Jquery script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var height = window.innerHeight;
$(document).ready( function(){
$('iframe').css('height', height)
} );
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
