Iframe creates extra space below

Question

Why does an iframe add extra space under its element? Look at this weird behavior:

相关标签:

Answer 1

What worked for my app, was adding overflow-y: hidden; to the html of the iframe.

Answer 2

here is another answer please check it ...

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}

Answer 3

The other answers worked for me when designing for just mobile or just desktop, but when the padding-bottom would have been different based on the size of the screen, it did not work.

What does work is using Viewport Height.

I added these to my CSS and it resolved the issue in all resolutions.

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}