Full-screen iframe with a height of 100%

Is iframe height=100% supported in all browsers;

I am using doctype as;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In my iframe code, if I say

<iframe src="xyz.pdf" width="100%" height="100%" />

I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px) Is this supported in all major browsers (IE/Firefox/Safari) ?

Also regarding scrollbars, even though I say scrolling=”no”, I can see disabled scrollbars in Firefox…How do I completely hide scrollbars and set the iframe height automatically?


solution

3 approaches for creating a fullscreen iframe:


In supported browsers, you can use viewport-percentage lengths such as height: 100vh.

Where 100vh represents the height of the viewport, and likewise 100vw represents the width.

Example Here

body {   margin: 0; /* Reset default margin */
}
iframe {   display: block; /* iframes are inline by default */   background: #000;   border: none; /* Reset default border */   height: 100vh; /* Viewport-relative units */   width: 100vw;
}

<iframe></iframe>

  • Approach 2 - Fixed positioning

This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

Example Here

iframe {   position: fixed;   background: #000;   border: none;   top: 0; right: 0;   bottom: 0; left: 0;   width: 100%;   height: 100%;
}

<iframe></iframe>

  • Approach 3

For this last method, just set the height of the body/html/iframe elements to 100%.

Example Here

html, body {   height: 100%;   margin: 0; /* Reset default margin on the body element */
}
iframe {   display: block; /* iframes are inline by default */   background: #000;   border: none; /* Reset default border */   width: 100%;   height: 100%;
}

<iframe></iframe>