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.
