How to make an iframe span 100% height

Question

I would like to have an iframe in a web page which would take up all of the visible height. I set height=100% but it takes only about 20% of the room and there is a lot of white place under it.
Following some advice on stackoverflow I set height=100% to all parents but it didn't help. If I change % to vh, it gets yet smaller.
What should I do?
Thanks

Answer 1

I think the main problem here is that you are using the HTML "height" attribute (`<div height="X">`), rather than the CSS "height" property (`<div style="height: X;">`). You really should use a dedicated stylesheet!

Here, I whipped up an example:
https://code.sololearn.com/W4VajQgxUHY6/#html

Answer 2

I think you should increase the iframe height, 100% height covers up all the visible height in Mobile devices, which may not be same in laptop or PC.

Answer 3

Are you using it in Tablet PC?

Answer 4

michal Check out this https://pasteboard.co/IIENfdU.png, if you set both height and width at 1000%(Not logical but still works).

Answer 5

michal I don't think it's deprecated but it only works on certain elements. It works on iframes and canvas and images but I don't think it works for div or body tags.

Also I'm not sure the HTML attribute even knows what a `vh` unit is.

But I also don't know all the details, imo theres really no reason to use the HTML attributes for width and height (<canvas> being the only exception).

Answer 6

michal check this out. Sorry so short, headed to work.

https://code.sololearn.com/W9FMq5q4jj2V/?ref=app

Edit:
Trick to viewport units on mobile.
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Answer 7

I'm not really sure, but maaaybe the reason is that iframe is an inline element? Maybe try display:block and then height:100vh. I haven't tested it myself so let me know if it worked or not.

Answer 8

If you know that the parent element is as high as you need it to be, you can always

parent {
display: flex;
}

iframe {
flex-grow: 1; /* which I think is the default */
}

Answer 9

None of them worked. Here is the code
https://code.sololearn.com/WOK29OKHHbw4/?ref=app

Answer 10

Yes, setting the height to 500 or 1000 vh or % works but it seems to have a similar effect like setting it to a constant (like 600px)

Answer 11

Schindlabua Thanks. It really was the problem. But why do height and width exist as element attributes? Are they just deprecated?

Answer 12

I'm doing it on my laptop and running in Firefox

Answer 13

Increasing iframe height didn't help