How to add a full Page iframe with CSS?

Spread the love

Sometimes, we want to add a full Page iframe with CSS.

In this article, we’ll look at how to add a full Page iframe with CSS.

How to add a full Page iframe with CSS?

To add a full Page iframe with CSS, we can set the width and height of the iframe.

For instance, we write

<!DOCTYPE html>
<html>
  <head>
    <title>Test Layout</title>
    <style type="text/css">
      body,
      html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

      #content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        src="http://example.com"
      ></iframe>
    </div>
  </body>
</html>

to add an iframe with width and height 100%.

And we make its parent div have absolute position wwith left, right and bottom set to 0 so that it stays on the screen.

Also we remove padding and margin from body so that there’s no gaps.

Conclusion

To add a full Page iframe with CSS, we can set the width and height of the iframe.

Leave a Reply

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