+ 2
How to make an iframe span 100% height
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
13 Respostas
+ 2
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
+ 7
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.
+ 6
Are you using it in Tablet PC?
+ 5
michal Check out this https://pasteboard.co/IIENfdU.png, if you set both height and width at 1000%(Not logical but still works).
+ 2
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).
+ 2
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/
+ 1
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.
+ 1
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 */
}
+ 1
None of them worked. Here is the code
https://code.sololearn.com/WOK29OKHHbw4/?ref=app
+ 1
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)
+ 1
Schindlabua Thanks. It really was the problem. But why do height and width exist as element attributes? Are they just deprecated?
0
I'm doing it on my laptop and running in Firefox
0
Increasing iframe height didn't help