How do you give iframe 100% height [duplicate]

Asked 11/3, 2011 at 11:49 Answered 18/9, 2014 at 14:48

138

I'm trying

<iframe height="100%" ...>

but it still doesn't resize it. When i try the height in pixles it works.

edit: 100% seems to be working on IE but not firefox

Kolnos answered 11/3, 2011 at 11:49 Comment(10)

Can you please show the HTML code you are working with? Setting something to 100% height will give it the same height as it's PARENT. What is the parent of the iframe? – Grassland 11/3, 2011 at 11:52

@Elad, he had included the iframe tag declaration, but without the code formatting it wasn't visible (I had thought the same as you) – Minette 11/3, 2011 at 11:53

@elad there is not html code ive only got html head body iframe. it seems ot be working in IE though not firefox – Kolnos 11/3, 2011 at 11:55

Try setting a height for the body. – Grassland 11/3, 2011 at 11:55

For those looking around in the future, see: https://mcmap.net/q/66805/-full-screen-iframe-with-a-height-of-100/… – Radioscope 30/3, 2015 at 23:59

@JoshCrozier Is it usual to close 4 year old questions as duplicates in favor of a more recent one and then link to your own answer? Seems a bit shady. – Intolerance 28/4, 2015 at 11:8

@Intolerance I can agree with that. It may be shady, but my intent was to direct future visitors to the more popular question with an array of different answers/solutions.. you could bring it up on meta. – Radioscope 28/4, 2015 at 12:30

This question appeared above the "more popular" answer in my Google Search, and in my opinion, is actually the better worded question: "How do you give iframe 100% height" vs "Full-screen iframe with a height of 100%" – Adin 18/9, 2017 at 3:16

according to [1] 100% is not correct, width and height must be integer. [1] html.spec.whatwg.org/multipage/… – Inoperable 9/1, 2023 at 14:30

I finally found the answer to that question that actually works : - Position the iframe in the top left corner of the div. - Make it 100% of the height and width of the div. - Add padding to the top of the div equal to the aspect ratio of the iframe (for HD videos, 56.25%, or 9 / 16 * 100).

.responsive-iframe { 	max-width: 100%; 	padding-top: 56.25%; 	position: relative; 	width: 100%; }  .responsive-iframe iframe { 	position: absolute; 	top: 0; 	left: 0; 	width: 100%; 	height: 100%; }

– Retrogradation 15/6, 2023 at 13:18

235

You can do it with CSS:

<iframe style="position: absolute; height: 100%; border: none"></iframe>

Be aware that this will by default place it in the upper-left corner of the page, but I guess that is what you want to achieve. You can position with the left,right, top and bottom CSS properties.

Intolerance answered 11/3, 2011 at 11:54 Comment(8)

Wow! After so many failed attempts (including some not-so-elegant JavaScript suggestions) trying to make IFrame's to size to a correct height consistently, I stumbled upon this answer, and so far it seems to work very well! Thank you for saving me hours and hours worth of additional research. I cannot figure out why others do not have this as an answer??? By the way, absolute positioning can be easily managed by placing iframe in a relatively positioned div - that's what I am doing - absolutely position it at top:0, left:0 in a parent div that has position:relative; Seems to work for me. – Polybasite 15/2, 2012 at 5:28

The <div> in which the iframe is located also has a height: 100%, thanks, your solution worked! I embedded a SSRS inside a ASP.NET page. – Sandglass 2/4, 2013 at 7:9

doesnt work with me :( similar problem :( – Baluchi 11/5, 2013 at 11:23

Nice one ... looks fine in all major browsers. Even IE! – Stephanstephana 12/7, 2013 at 13:38

Isn't working in Firefox v28. – Forsooth 10/2, 2014 at 5:23

Perhaps it's because this question / answer is so old, but position:absolute isn't necessary, in fact it's not a great idea unless you actually need to position it explicitly... just set the height on the parent container. – Risk 25/1, 2015 at 21:27

Put this inside another div with the position set to relative.Make that div have a height of 100% and it scales! Perfect. – Spurgeon 20/2, 2015 at 1:24

Working for react-native-webview as well. – Piecemeal 8/3, 2023 at 5:25

The problem with iframes not getting 100% height is not because they're unwieldy. The problem is that for them to get 100% height they need their parents to have 100% height. If one of the iframe's parents is not 100% tall the iframe won't be able to go beyond that parent's height.

So the best possible solution would be:

html, body, iframe { height: 100%; }

…given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).

Tested in:

Chrome 30, Firefox 24, Safari 6.0.5, Opera 16, IE 7, 8, 9 and 10

PS: I don't mean to be picky but the solution marked as correct doesn't work on Firefox 24 at the time of this writing, but worked on Chrome 30. Haven't tested on other browsers though. I came across the error on Firefox because the page I was testing had very little content... It could be it's my meager markup or the CSS reset altering the output, but if I experienced this error I guess the accepted answer doesn't work in every situation.

Update 2021

@Zeni suggested this in 2015:

iframe { height: 100vh }

...and indeed it does the trick!

Careful with positioning as it can potentially break the effect. Test thoroughly, you might not need positioning depending of what you're trying to achieve.

Epizoon answered 7/10, 2013 at 14:58 Comment(7)

It looks like having a parent with height: 100% does the trick. position: absolute has nothing to do with it. – Udella 28/3, 2015 at 18:3

This worked for me. Another solution which works is set height in style of iframe to 100vh. <iframe src="/mysite.com" width="100%" style="height: 100vh;"></iframe> (vh is viewport height) – Tigerish 25/12, 2015 at 14:23

"they need their parents to have 100% height" is not true. iframes take their height from the content if set to 100%, not from the container. – Deflation 13/9, 2018 at 14:20

css solutions do not work when the content of the iframe changes (eg, when the iframe content makes ajax calls etc.) – Scaremonger 23/4, 2019 at 19:20

I tried most suggestions here without success, and just before moving on I noticed @Tigerish 's comment: setting height: 100vh; in my CSS solved the height=100%; being ignored issue (even though I did not have a viewport line in my HTML file). I did not need positioning ... – Schlessinger 25/1, 2021 at 22:16

More here re: vh (viewport height): #5868485 – Schlessinger 25/1, 2021 at 22:25

vh is just viewport height so if the content is longer than the viewport than this will not be sufficient – Yamamoto 8/12, 2021 at 12:5

The iFrame attribute does not support percent in HTML5. It only supports pixels. http://www.w3schools.com/tags/att_iframe_height.asp

Cankerous answered 18/9, 2014 at 14:48 Comment(0)

Recommended topics

Hot tags