Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Share Improve this question asked Feb 16, 2014 at 22:59 user3264162user3264162 751 gold badge1 silver badge5 bronze badges3 Answers
Reset to default 13Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.
<body style="margin: 0 auto;">
<iframe src="some.html" frameborder="0"
style="overflow:hidden;
display:block; position: absolute; height: 100%; width: 100%">
<p style="">
Your browser does not support iframes.
</p>
</body>
add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/
Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:
<style>
/* Unless you use normalizer or some other CSS reset,
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>
<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only.
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content,
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document,
so no borders and scrollbars will appear.
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>
See demo
See seamless property browser compatibility.
*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"