how do I make an iframe 100% width and height of the window?
-
Some suggestions over here: stackoverflow.com/questions/5867985/iframe-100-height– Andy ChaseJul 22, 2010 at 5:56
-
2This 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).– IAmNaNSep 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".– m3ndaDec 30, 2014 at 5:38
2 Answers
This code probably help you.
<iframe src="" onload="this.width=screen.width;this.height=screen.height;">
-
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– mikelJul 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.– SorenSep 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.– m3ndaDec 16, 2014 at 5:18
-
5window.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>– LuckyDec 9, 2015 at 22:17
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.