How to Create a Full-screen iFrame with 100% Height
Topic: HTML / CSSPrev|Next
Answer: Use the CSS vh and vw Units
You can simply set the <iframe> height and width in vh (viewport height) and vw (viewport width) units respectively to make it cover full-screen with a height and width of 100%.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Full-screen iframe (100% Height and Width)</title>
<style>
body{
margin: 0; /* Remove default margin */
}
iframe{
display: block; /* iframes are inline by default */
height: 100vh; /* Set height to 100% of the viewport height */
width: 100vw; /* Set width to 100% of the viewport width */
border: none; /* Remove default border */
background: lightyellow; /* Just for styling */
}
</style>
</head>
<body>
<iframe src="html/hello.html"></iframe>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
