Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set full-screen iframe with height 100% in JavaScript ?

  • Last Updated : 31 Oct, 2019

Given an HTML document containing an <iframe> element and the task is to change the height of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the height of the iframe which are discussed below:

Method 1: This method uses id attribute of iframe with height property to change the height of <iframe> element. JavaScript code is written within the <script> tag.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




<html>
   
<head>
    <title>
        How to change the height of an
        iframe to 100% with JavaScript?
    </title>
</head>
   
<body style="text-align:center;">
   
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
   
    <h3>
        How to change the height of a
        <iframe id="iframe" width="100%" height="40%"
        frameborder="0" allowfullscreen>
        </iframe> to 100% with JavaScript?
    </h3>
   
    <br><br>
   
    <button onclick="changeHeight()">
        Click to change
    </button>
  
    <script>
      
        // JavaScript code to change the
        // height to 100% of <iframe>
        function changeHeight() {
            var x = document.getElementById('iframe');
            x.style.height = "100%";
        }
    </script>
</body
  
</html>

Output:

  • Before clicking the button:
  • After clicking the button:

Method 2: This method uses the id attribute of the iframe with window.innerHeight property to change the height of <iframe> element. JavaScript code is written within the <script> tag.




<html>
   
<head>
    <title>
        How to change the height of an 
        iframe to 100% with JavaScript?
    </title>
</head>
   
<body style="text-align:center;">
   
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
   
    <h3>
        How to change the height of a
        <iframe id="iframe" width="100%" src=
        frameborder="0" ></iframe
        to 100% with JavaScript?
    </h3>
   
    <br><br>
   
    <button onclick="changeHeight()">
        Click to change
    </button>
   
    <script>
      
        // JavaScript code to change the
        // height to 100% of <iframe>
        function changeHeight() {
            var x = document.getElementById('iframe');
            x.style.height = window.innerHeight;
        }
    </script>
</body>
   
</html>

Output:

  • Before clicking the button:
  • After clicking the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!