Set Iframe to 100% height

Asked

Viewed 14,723 times

0

How can I make an iframe occupy 100% of its screen size? Especially the question of height..

I tried to style='height:100%' but it doesn’t take.

I need to put it and try as much as possible to do that iframe seems to be part of the window, one of the ways is to remove the SCROLL, but for that, I need that in the HEIGHT it complies with 100% of the Iframe document size.

The attached issue did not help me solve my problem.

Challenge: Automatically open iframe of this code in JSFIDDLE:

https://jsfiddle.net/0jdo7fjL/

html css iframe

  • @I took a look at it, but I don’t think it’s a duplicate. Well, at least the case is different, and the answer to the question did not help me, or maybe I did not know how to interpret it. Anyway, I launched a challenge there :)

  • This example that you left in jsfiddle does not match my solution, missing add html,body{height: 100%;} , pay attention to my answer that will solve your problem.

  • You can do this: <iframe width="500" src="https://noticias.uol.com.br/"/>

2 answers

5


Though it’s already answered here Div with height 100%, I will try to clarify and explain the behavior, the DOCTYPE for HTML5 as well as for HTML4 with Strict works in the same way as in Quirks mode (Internet Explorer 10), basically the element root (generally) the html receive the scrollbar, however this varies in Gecko, which the scrollbar would be like in body, in every way while using the DOCTYPE to HTML5

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

Note the result:

I did the examples in Opera, but it’s the same engine as Google Chrome, so the behavior is identical

resultado

Even the scrollbar being present the element "box" gets the height equivalent to the content, then even if it applies height: 100% in your iframe this will not work:

iframe

Then apply 100% height to the elements <html> and <body> iframe will be able to stay at 100%, however if the element is inside a DIV that is inside BODY, you will need to apply height:100%; for the DIV as well, because the 100% in the html, body only affects the children of BODY, but not the "grandchildren", it is also necessary to apply width: 100%; in the elements if you need to use width in the iframe with percentage, instead of pixels, it should look like this:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body, .main, .main iframe {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="main">
        <iframe src="https://answall.com"></iframe>
    </div>
</body>
</html>

However you may notice that there are some margins in iframe and you will also notice that body scrollbars have been generated:

iframe

Then you have to remove the margins:

html, body {
    margin: 0;
    padding: 0;
}
html, body, .main, .main iframe {
    margin: 0;
    width: 100%;
    height: 100%;
}
.main iframe {
    border: none; /* remove as bordas do iframes*/
}

However depending on the browser (rendering engine) it may be generating the scrollbar vertically from BODY, you have two things you can do, or adjust the box-sizing: content-box; (still can vary), yet what will probably be more efficient is to remove the scrollbar, so you will only use the HTML and BODY scrollbar so you will only use the scrollbar from within the iframe:

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
html, body, .main, .main iframe {
    margin: 0;
    width: 100%;
    height: 100%;
}
.main iframe {
    border: none; /* remove as bordas do iframes*/
}

Alternative

There is a simple alternative that will not depend on applying height:100%; cascading, just use position (fixed or absolute), note that the generated scrollbar is from within IFRAME, the position: fixed does not affect the content and therefore does not generate the scrollbar, different from the position: absolute;:

.main iframe {
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="main">
    <iframe src="https://answall.com"></iframe>
</div>

HTML vs PHP

Anderson noticed your comment:

Does it only work in HTML document, not PHP? What will prevent you from opening 100%?

No PHP has nothing to do with client-side, PHP nay executes to the same time as HTML, PHP runs on server-side generates HTML or any other type of document sends to the program that works HTTP (Apache, IIS, Nginx, Lightttpd, etc.) and this in turn sends as a response over the internet generally and is received the HTML already processed, I recommend you to read these posts I did on the subject:

  • 2

    Congratulations, great explanation. I already left my +1

  • 1

    @Mateusveloso thank you very much!

0

You need to add in html,body 100% css at the time for other elements to do this.

html,body{
  height: 100%;
}
<iframe src="https://answall.com" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

  • Didn’t work, buddy..

  • You can post your code ?

  • The code is large, basically is an iframe of a site, within my site, and I would like the site to stay whole, and do not need to scroll down, or up to be seeing the elements.. I’ll try replicating on JSFIDDLE. Your code did not work friend, the iframe of stackoverflow was not at the time 100%, It was cut and nor to scroll (because of the blocked scroll), similar error that happens here..

  • I launched the challenge there in the Post, a read that already updated Matthew.. Thank you for the attention.

  • Just to correct your reply, the code I sent the stack iframe is 100% yes, it only has that space to grow... is 100%

  • Good, ta ai your answer friend : https://jsfiddle.net/8Lntbs35/ your challenge is fulfilled, iframe with 100% of the page, so treat scroll now.

Show 1 more comment

Browser other questions tagged html css iframe

You are not signed in. Login or sign up in order to post.