How i can fix iframe height in %

Hi,

To do a 100% high iframe you will need to define the height of the container (in most cases the html or body tag).

What I do in these cases is give both of the containers maximum size: html, body { width: 100%; height: 100%; }, this makes the height and width always have a size to relate to no matter what ??

Of course if you put the iframe inside something that has height: 150px; it won’t be bigger than 150px but it looks like you’re doing a full page one in this instance so that shouldn’t be an issue.

If the grey bar on top of the page is not a part of the iframe and you want the iframe to take the remaining height then I’m afraid a reliable CSS-only solution doesn’t exist and you might have to use JavaScript instead.

Position absolute the iFrame and give it 100% height in its relative container, and give the relative container a padding-top of the height of the iFrame.

E.g.

<div>
    <iframe height="500" />
</div>

div {
    padding-top: 500px;
    position: relative;
}

iframe {
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
}