Iframe does not fit verically with height 100%

According to the following code, <iframe> does not adjust vertically even if you set the height attribute to 100%.

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Panel</h3>
        </div>
        <div class="panel-body">
            <iframe width="100%" height="100%" src="http://superlp.com.br" frameborder="0"></iframe>
        </div>
    </div>
</div>

Why does this happen? How to solve?

Author: Renan Gomes, 2014-12-13
Source

2 answers

Try This: 

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Documento sem t&iacute;tulo</title>
</head>

<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Panel</h3>
        </div>
        <div class="panel-body">
            <iframe width="100%" style="position: absolute" height="100%" src="http://superlp.com.br" frameborder="0" ></iframe>
        </div>
    </div>
</div>
</body>
</html>
 3
Author: , 2014-12-18 16:14:26

I found a very simple solution: where has height="100%", replace with style="height:100vh".

 1
Author: Yago Marques, 2018-10-30 14:41:57