137

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

124697
  • 22,097
  • 68
  • 188
  • 315
  • 1
    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? – Elad Lachmi Mar 11 '11 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) – Tomas Narros Mar 11 '11 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 – 124697 Mar 11 '11 at 11:55
  • Try setting a height for the body. – Elad Lachmi Mar 11 '11 at 11:55
  • For those looking around in the future, see: http://stackoverflow.com/questions/5867985/iframe-auto-100-height/27853830#27853830 – Josh Crozier Mar 30 '15 at 23:59
  • 3
    @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. – dtech Apr 28 '15 at 11:08
  • @dtech 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](http://meta.stackoverflow.com/). – Josh Crozier Apr 28 '15 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%" – Luke Sep 18 '17 at 03:16
  • according to [1] `100%` is not correct, `width` and `height` must be integer. [1] https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-width – am70 Jan 09 '23 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%; }` – ZAA.CC Jun 15 '23 at 13:18

3 Answers3

231

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.

Simon Warta
  • 10,850
  • 5
  • 40
  • 78
dtech
  • 13,741
  • 11
  • 48
  • 73
  • 6
    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. – smallworld Feb 15 '12 at 05:28
  • The
    in which the iframe is located also has a height: 100%, thanks, your solution worked! I embedded a SSRS inside a ASP.NET page.
     – Riaan Apr 02 '13 at 07:09
  • 7
    doesnt work with me :( similar problem :( – Sakthivel May 11 '13 at 11:23
  • Nice one ... looks fine in all major browsers. Even IE! –  Jul 12 '13 at 13:38
  • 1
    Isn't working in Firefox v28. – L84 Feb 10 '14 at 05:23
  • 3
    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. – Wes Johnson Jan 25 '15 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. – RyanY Feb 20 '15 at 01:24
  • Working for react-native-webview as well. – Shrikant Jha Mar 08 '23 at 05:25
60

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.

Wallace Sidhrée
  • 11,221
  • 6
  • 47
  • 58
  • 3
    It looks like having a parent with `height: 100%` does the trick. `position: absolute` has nothing to do with it. – chowey Mar 28 '15 at 18:03
  • 19
    This worked for me. Another solution which works is set height in style of iframe to 100vh. (vh is viewport height) – Zeni Dec 25 '15 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. – movAX13h Sep 13 '18 at 14:20
  • css solutions do not work when the content of the iframe changes (eg, when the iframe content makes ajax calls etc.) – Alex C Apr 23 '19 at 19:20
  • I tried most suggestions here without success, and just before moving on I noticed @Zeni '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 ... – Victoria Stuart Jan 25 '21 at 22:16
  • More here re: `vh` (viewport height): https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100 – Victoria Stuart Jan 25 '21 at 22:25
  • vh is just viewport height so if the content is longer than the viewport than this will not be sufficient – Dan Dec 08 '21 at 12:05
34

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

Bob Bacas
  • 349
  • 3
  • 2