Categories
HTML

How to add full-screen iframe with a height of 100% with HTML?

Spread the love

To add full-screen iframe with a height of 100% with HTML, we make set the width and height to fill the screen width and height.

For instance, we write

<iframe></iframe>

to add an iframe.

Then we write

body {
  margin: 0;
}

iframe {
  display: block;
  background: #000;
  border: none;
  height: 100vh;
  width: 100vw;
}

to remove the margins from the body element.

Then we set the height and width of the iframe to fill the screen’s height and width respectively.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *