WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

Automatically Adjust iFrame Height According to its Contents Using JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the contentWindow Property

You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>JavaScript Auto Adjust iFrame Height Based on Content</title>
  • <style>
  •     iframe{
  •         width: 100%;
  •         border: 2px solid #ccc;
  •     }
  • </style>
  • </head>
  • <body>
  •     <iframe src="demo.php" id="myIframe"></iframe>
  •     
  •     <script>
  •     // Selecting the iframe element
  •     var iframe = document.getElementById("myIframe");
  •     
  •     // Adjusting the iframe height onload event
  •     iframe.onload = function(){
  •         iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
  •     }
  •     </script>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.