+ 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

26th Nov 2019, 9:02 PM
michal
13 Answers
+ 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
27th Nov 2019, 6:20 PM
Schindlabua
Schindlabua - avatar
+ 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.
26th Nov 2019, 9:11 PM
NightFox
NightFox - avatar
+ 6
Are you using it in Tablet PC?
26th Nov 2019, 9:06 PM
NightFox
NightFox - avatar
+ 5
michal Check out this https://pasteboard.co/IIENfdU.png, if you set both height and width at 1000%(Not logical but still works).
27th Nov 2019, 5:39 PM
NightFox
NightFox - avatar
+ 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).
27th Nov 2019, 9:48 PM
Schindlabua
Schindlabua - avatar
+ 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/
28th Nov 2019, 3:37 AM
Brad
Brad - avatar
+ 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.
26th Nov 2019, 10:13 PM
Rick Sanchez
Rick Sanchez - avatar
+ 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 */ }
27th Nov 2019, 11:19 AM
Schindlabua
Schindlabua - avatar
+ 1
None of them worked. Here is the code https://code.sololearn.com/WOK29OKHHbw4/?ref=app
27th Nov 2019, 5:28 PM
michal
+ 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)
27th Nov 2019, 6:10 PM
michal
+ 1
Schindlabua Thanks. It really was the problem. But why do height and width exist as element attributes? Are they just deprecated?
27th Nov 2019, 9:39 PM
michal
0
I'm doing it on my laptop and running in Firefox
26th Nov 2019, 9:07 PM
michal
0
Increasing iframe height didn't help
26th Nov 2019, 9:14 PM
michal