74

how do I make an iframe 100% width and height of the window?

Jacksta
  • 1,283
  • 4
  • 17
  • 21
  • Some suggestions over here: http://stackoverflow.com/questions/5867985/iframe-100-height – Andy Chase Jul 22 '10 at 05:56
  • 2
    This isn't really the same question as the duplicate for several reasons: a) this question asks "how" while the other question asks "where: (as in "which browsers"), b) this question came a full year before the other "question", and c) the other question is lower quality, poorly written and formatted. d) two questions with the same answer do not make duplicates (ie 1+1 and 4/2 are both 2 but aren't the same question). – IAmNaN Sep 01 '14 at 19:49
  • @mikel answer is not posted into the other question. I guess is not the same "how to construct a 100% iframe" AND "how to make 100% width, probably after it exists on the page". – m3nda Dec 30 '14 at 05:38

2 Answers2

76

This code probably help you.

<iframe src="" onload="this.width=screen.width;this.height=screen.height;">
Nicholas DiPiazza
  • 10,029
  • 11
  • 83
  • 152
mikel
  • 1,043
  • 9
  • 4
  • this.width to set the width of this tag . screen.width to get the screen width value . this code make this tag (iframe) width = screen width and it's height = screen height - i am sorry – mikel Jul 29 '14 at 04:36
  • 4
    `screen` is the actual screen and not the browser window, so in most cases the browser window will be smaller than the screen size. – Soren Sep 30 '14 at 21:24
  • This is working for me on most scenarios, obviosly in scenarios with javascript. Looking for solution like this for non-js. Thanks a lot. – m3nda Dec 16 '14 at 05:18
  • 5
    window.innerWidth / window.innerHeight is far more accurate. – Kristian Williams Dec 23 '14 at 10:14
  • @Kristian Williams - I've tried and i guess are not for the same proposal. Still think screen.height is the best way to try force an alement to the 100% of space. As example, a "fake" dns redirection between ports uses a iframe loading right website at right port, like open myweb.com:8080 while accessing 8080.myweb.com as regular port 80 web access. The 100% auto-fill funcion is perfect in that case, so the content will being adapted to screen instead to iframe proportions. – m3nda Dec 30 '14 at 05:49
  • 14
    ... – Lucky Dec 09 '15 at 22:17
  • Working for me. Thank you! – MrD Mar 29 '17 at 13:28
  • @Lucky, why do you post this in the comment and not as an answer? It is not a good solution either, the height is very small for me. – Black Dec 06 '21 at 11:03
26

Answering this just in case if someone else like me stumbles upon this post among many that advise use of JavaScripts for changing iframe height to 100%.

I strongly recommend that you see and try this option specified at How do you give iframe 100% height before resorting to a JavaScript based option. The referenced solution works perfectly for me in all of the testing I have done so far. Hope this helps someone.

Community
  • 1
  • 1
smallworld
  • 910
  • 7
  • 15