Full-screen iframe with a height of 100%

html

responsive

iframe

cross-browser

byAnton Shumikhin·Aug 19, 2024

Implement a full-screen iframe by assigning height: 100% to the html, body, and iframe selectors. Nullify margin and padding and set iframe width to 100%. Avoid scrollbars by setting overflow: hidden.

CSS:

html, body, iframe {
  height: 100%;
  margin: 0;
  padding: 0;
}
iframe {
  width: 100%;
  border: none;
  overflow: hidden; /* This will compel the scrollbars to go on indefinite leave */
}

Setting `iframe` properties

When aiming for a full-screen iframe, a few techniques will ensure your layout behaves well across various browsers and devices.

Positioning for full-screen

An iframe is an inline element by default. To shift it to full-screen, we assign position: absolute or position: fixed. This roots the iframe to the parent or makes it unscrollable respectively.

CSS:

iframe {
  position: absolute; /* Lay it out like a red carpet. */
  top: 0; left: 0; right: 0; bottom: 0;
}

Visual integration

Making the iframe look like it's part of your main webpage may require using the seamless attribute. Note, however, that not all browsers fully support this attribute.

Controlling scrollbars

Oftentimes, to keep the scrollbars away, you might want to imply by the size of your iframe that there's absolutely no room for them here.

CSS:

iframe {
  width: 150%; /* It's not oversized, it's plus-sized. */
  height: 150%;
}

Cross-browser compatibility

Consistency across different browsers is paramount. So always validate your designs on multiple browsers. In addition, consider employing HTML5 for better compatibility.

Full height with viewport units

Capturing the full height of the viewport can help make the iframe truly fullscreen. Here, viewport-percentage lengths viz. 100vh does the trick.

CSS:

iframe {
  height: 100vh; /* No half-measures here! */
}

Dynamic iframe height

When the iframe content is from the same domain, you can consider adjusting the height dynamically using JavaScript.

Border aesthetics

Whisk away the iframe borders with the frameborder="0" attribute. It gives a cleaner look and makes the iframe feel more at home with the rest of your content.

Deeper dive on iframes

Handling responsiveness

It is critical to ensure that the iframe's content is responsive. Even with an fullscreen iframe, non-responsive content can lead to a truly tempestuous user experience.

Supporting legacy browsers

Always plan for legacy browser support. The XHTML 1.0 Transitional doctype is a pal that helps here. Nevertheless, modern doctypes are the future and often provide more benefits.

Browser quirks handling

Different browsers have different eccentricities. For instance, Firefox requires tailor-made CSS rules to remove scrollbars effectively.

Responsive layout issues

Responsive layouts can sometimes cause scrollbars to emerge due to 100vw. Think ahead and test your iframe content's responsiveness to iron out these issues.