Iframe does not really fit with 100% height

Asked

Viewed 5,335 times

2

According to the following code, <iframe> does not fit vertically even when setting the attribute height like 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?

css iframe height
  • 1

    But the iframe is using 100% of the element div.panel-body. What would be your need?

  • 1

    You want the panel to extend to the entire page and the iframe to accompany it?

  • Exactly Andre Figueiredo. The page inside the iframe needs to appear completely without the scrollbar.

  • Take a look at this question in the Soen: http://stackoverflow.com/questions/5867985/iframe-auto-100-height

  • As Carlos said, the iframe is already occupying 100% of the height of the parent element. What remains to do is to force the parent element (div) to occupy all available space.

  • Take a look http://jsfiddle.net/g206hbh9. and see if that’s it.

  • Friend might have some div of yours that limits him before, already looked at this?

Show 2 more comments

2 answers

3

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>

1

I found a very simple solution: Where do you have height="100%", replace with style="height:100vh".

Browser other questions tagged css iframe height

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