Is iframe height=100% supported in all browsers?
I am using doctype as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In my iframe code, if I say:
<iframe src="xyz.pdf" width="100%" height="100%" />
I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px) Is this supported in all major browsers (IE/Firefox/Safari) ?
Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox...How do I completely hide scrollbars and set the iframe height automatically?
This question is related to
javascript
html
css
iframe
html-frames
1. Change your DOCTYPE to something less strict. Don't use XHTML; it's silly. Just use the HTML 5 doctype and you're good:
<!doctype html>
2. You might need to make sure (depends on the browser) that the iframe's parent has a height. And its parent. And its parent. Etc:
html, body { height: 100%; }
As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe, percentage values are no longer allowed. But the following worked for me
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
Though width:100% works, height:100% does not work. So window.innerHeight has been used. You can also use css pixels for height.
iframe:In supported browsers, you can use viewport-percentage lengths such as height: 100vh.
Where 100vh represents the height of the viewport, and likewise 100vw represents the width.
body {_x000D_
margin: 0; /* Reset default margin */_x000D_
}_x000D_
iframe {_x000D_
display: block; /* iframes are inline by default */_x000D_
background: #000;_x000D_
border: none; /* Reset default border */_x000D_
height: 100vh; /* Viewport-relative units */_x000D_
width: 100vw;_x000D_
}<iframe></iframe>This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.
iframe {_x000D_
position: fixed;_x000D_
background: #000;_x000D_
border: none;_x000D_
top: 0; right: 0;_x000D_
bottom: 0; left: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}<iframe></iframe>For this last method, just set the height of the body/html/iframe elements to 100%.
html, body {_x000D_
height: 100%;_x000D_
margin: 0; /* Reset default margin on the body element */_x000D_
}_x000D_
iframe {_x000D_
display: block; /* iframes are inline by default */_x000D_
background: #000;_x000D_
border: none; /* Reset default border */_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}<iframe></iframe>You first add css
html,body{
height:100%;
}
This will be the html:
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
To get a full screen iframe without a scrollbar inside the iframe use the following css. Nothing more is required
iframe{
height: 100vh;
width: 100vw
}
iframe::-webkit-scrollbar {
display: none;
}
I ran into the same problem, I was pulling an iframe into a div. Try this:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
The height is set to 100vh which stands for viewport height. Also, the width could be set to 100vw, although you'll likely run into problems if the source file is responsive (your frame will become very wide).
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
Additional to the answer of Akshit Soota: it is importand to explicitly set the height of each parent element, also of the table and column if any:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
body {_x000D_
margin: 0; /* Reset default margin */_x000D_
}_x000D_
iframe {_x000D_
display: block; /* iframes are inline by default */_x000D_
background: #000;_x000D_
border: none; /* Reset default border */_x000D_
height: 100vh; /* Viewport-relative units */_x000D_
width: 100vw;_x000D_
}<iframe></iframe>The following tested working
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
iframe:viewport area when page loadsNice approach for landing pages with video or any embedded content. You can have any additional content below of embedded video, which is revealed when scrolling page down.
CSS and HTML code.
body {_x000D_
margin: 0;_x000D_
background-color: #E1E1E1;_x000D_
}_x000D_
header {_x000D_
width: 100%;_x000D_
height: 56vw;_x000D_
max-height: 100vh;_x000D_
}_x000D_
.embwrap {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
display: table;_x000D_
}_x000D_
.embwrap .embcell {_x000D_
width: auto;_x000D_
background-color: black;_x000D_
display: table-cell;_x000D_
vertical-align: top;_x000D_
}_x000D_
.embwrap .embcell .ifrwrap {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
display: inline-table;_x000D_
background-color: black;_x000D_
}_x000D_
_x000D_
.embwrap .embcell .ifrwrap iframe {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}<header>_x000D_
<div class="embwrap">_x000D_
<div class="embcell">_x000D_
<div class="ifrwrap">_x000D_
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</header>_x000D_
<article>_x000D_
<div style="margin:30px; text-align: justify;">_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>_x000D_
<p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>_x000D_
</div>_x000D_
</article>This is a great resource and has worked very well, the few times I've used it. Creates the following code....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
This worked very nicely for me (only if iframe content comes from the same domain):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Only this worked for me (but for "same-domain"):
function MakeIframeFullHeight(iframeElement){
iframeElement.style.width = "100%";
var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height ); // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
if(margins=="") { margins=0; ifrD.body.style.margin="0px"; }
(function(){
var interval = setInterval(function(){
if(ifrD.readyState == 'complete' ){
iframeElement.style.height = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
setTimeout( function(){ clearInterval(interval); }, 1000 );
}
},1000)
})();
}
you can use either:
MakeIframeFullHeight(document.getElementById("iframe_id"));
or
<iframe .... onload="MakeIframeFullHeight(this);" ....
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">
</iframe>
You can can call a function which will calculate the iframe's body hieght when the iframe is loaded:
<script type="text/javascript">
function iframeloaded(){
var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
}
</script>
<iframe onload="iframeloaded()" src=...>
Here is a concise code. It does relies on a jquery method to find the current window height. On load of iFrame it sets the height of the iframe be the same as the current window. Then to handle resizing of the page, the body tag has an onresize event handler which sets the iframe's height whenever the document is resized.
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
here's a working sample: http://jsbin.com/soqeq/1/
Source: Stackoverflow.com