What is the best way to set the height of an iframe at 100%?

Asked

Viewed 721 times

2

People what would be the best way to define the height of a iframe at 100%? I have tried with Height=100% own property HTML (although it is no longer advisable after the HTML5 and of the CSS), and also tried to define a style sheet height:100%;.

I’ve searched the forum but found no similar solution.

html css

  • I don’t know if it helps you, but if you start your stylesheet with html, body { height: 100%} the rest of the elements will understand that there is a relative percentage internally.

  • That’s right @Ivanferrer I even researched in English and I found the solution I tried a long time ago, I didn’t know this particularity of html, body having that is like 100%. Without it wouldn’t work, I even put an answer below.

1 answer

2

I found the solution in the international forum itself: How to set the iframe height & width to 100%

The best solution is through CSS, but an important observation is that it is necessary to modify the value of the tag html and body also with height 100%, and the position also influences, all except the relative work.

The code would be like this:

html,body        {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>

</div>

  • The problem now is whether the position for relative is not working.

Browser other questions tagged html css

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