Full-screen iframe with a height of 100%

Question

Is iframe height=100% supported in all browsers?

I am using doctype as:

Answer 1

3 approaches for creating a fullscreen iframe:

---

• Approach 1 - Viewport-percentage lengths

  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;
  }

---

• 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%;
  }

---

• 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%;
  }