74

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

3
  • Some suggestions over here: stackoverflow.com/questions/5867985/iframe-100-height
    – Andy Chase
    Jul 22, 2010 at 5: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 1, 2014 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, 2014 at 5:38

2 Answers 2

76

This code probably help you.

<iframe src="" onload="this.width=screen.width;this.height=screen.height;">
8
  • 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, 2014 at 4: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, 2014 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, 2014 at 5:18
  • 5
    window.innerWidth / window.innerHeight is far more accurate. Dec 23, 2014 at 10:14
  • 14
    <iframe name="Stack" src="stackoverflow.com" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
    – Lucky
    Dec 9, 2015 at 22:17
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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.