All geek questions in one place

IFRAME Fit for all content no scrollbar

Hi, I can't get IFRAME to work. I want its height to fit the entire content area. When I set the height to 100%, it is not suitable for the whole area and only fits to 3/4 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 put all the content in my iframe?

+4
source share
3 answers

Use this in your code, your problem was that it had to be set to position: absolute, otherwise it would just give you the required width and height.

 <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>
+7
source

body,html{ height: 100% } css, . , body . - http://jsfiddle.net/8qALc/

+1

Both answers are perfectly correct, but there are some drawbacks. 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>

Watch the demo

See the browser compatibilityseamless property .

* To support HTML4, add them to the iframe: frameborder="0" height="100%" width="100%"

0
source

Source: https://habr.com/ru/post/1527228/

More articles:


All Articles