WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties