How To Adjust The Width And Height Of Iframe To Fit With Content In It

Trang chủ » Html Iframe Adjust Height To Content » How To Adjust The Width And Height Of Iframe To Fit With Content In It

Có thể bạn quan tâm

When using the <iframe> tag in HTML, the content inside the iframe is displayed with a default size if the width and height attributes are not specified. Even if the dimensions are specified, it can still be difficult to perfectly match the iframe’s size with the content inside it. This can be especially challenging when the content inside the iframe changes dynamically or varies across different use cases. Manually setting the iframe’s dimensions each time is neither practical nor efficient.

There is a way to make it dynamically by using some attributes of JavaScript. The attributes used here are:

1. Dynamically Adjusting iframe Size with JavaScript

To ensure the iframe automatically resizes to fit its content, we can use JavaScript to dynamically adjust its width and height. The key properties we’ll use are:

  • contentWindow: This property returns the Window object used by an iframe element. It allows us to access the content inside the iframe.
  • scrollHeight: This property provides the entire height of the content inside the iframe in pixels.
  • scrollWidth: This property provides the entire width of the content inside the iframe in pixels.

Example:

html <!DOCTYPE html> <html> <body> <iframe style="width: 100%;border:3px solid black;" src="Page.html" id="Iframe"></iframe> <!--iframe tag--> <script> // Selecting the iframe element varframe=document.getElementById("Iframe"); // Adjusting the iframe height onload event frame.onload=function(){ // set the height of the iframe as // the height of the iframe content frame.style.height=frame.contentWindow.document.body.scrollHeight+'px'; // set the width of the iframe as the // width of the iframe content frame.style.width=frame.contentWindow.document.body.scrollWidth+'px'; } </script> </body> </html> HTML <!--Page.html file--> <!DOCTYPE html> <html > <body style="margin:0px;"> <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;"> <tr> <td colspan="2" style="padding:10px; background-color:#16641a;"> <h1 style="font-size:24px; color:#fbfffb;"> Welcome to GeeksforGeeks</h1> </td> </tr> <tr style="height:300px;"> <td style="width:20%; padding:20px; background-color:#ffffff; "> <ul style="list-style:none; padding:0px; line-height:24px;"> <li><a href="#" style="color:rgb(70, 192, 59);"> Coding</a></li><br> <li><a href="#" style="color:rgb(70, 192, 59);;"> WebTechnology</a></li><br> <li><a href="#" style="color:rgb(70, 192, 59);"> DSA</a></li> </ul> </td> <td style="padding:20px; background-color:#5c9b37; vertical-align:top;"> <h2>Way to gain knowledge</h2> <ul style="list-style:none; padding:0px; line-height:24px;"> <li style="color:#ffffff;">Learn</li><br> <li style="color:#ffffff;">Practice</li><br> <li style="color:#ffffff;">Apply to real world</li> </ul> </td> </tr> <tr> <td colspan="2" style="padding:5px; background-color:#2b2a2a; text-align:center;"> <p style="color:#ffffff;">copyright &copy; geeksforgeeks, Some rights reserved</p> </td> </tr> </table> </body> </html>

Output

The html code for the page what is used inside the iframe :

html <html > <head> </head> <body style="margin:0px;"> <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;"> <tr> <td colspan="2" style="padding:10px; background-color:#16641a;"> <h1 style="font-size:24px; color:#fbfffb;"> Welcome to GeeksforGeeks</h1> </td> </tr> <tr style="height:300px;"> <td style="width:20%; padding:20px; background-color:#ffffff; "> <ul style="list-style:none; padding:0px; line-height:24px;"> <li><a href="#" style="color:rgb(70, 192, 59);"> Coding</a></li><br> <li><a href="#" style="color:rgb(70, 192, 59);;"> WebTechnology</a></li><br> <li><a href="#" style="color:rgb(70, 192, 59);"> DSA</a></li> </ul> </td> <td style="padding:20px; background-color:#5c9b37; vertical-align:top;"> <h2>Way to gain knowledge</h2> <ul style="list-style:none; padding:0px; line-height:24px;"> <li style="color:#ffffff;">Learn</li><br> <li style="color:#ffffff;">Practice</li><br> <li style="color:#ffffff;">Apply to real world</li> </ul> </td> </tr> <tr> <td colspan="2" style="padding:5px; background-color:#2b2a2a; text-align:center;"> <p style="color:#ffffff;">copyright &copy; geeksforgeeks, Some rights reserved</p> </td> </tr> </table> </body> </html>

2. Using width=”100%” and height=”100%” for iframe

Another way set the height and width of the iframe to fit with content is to set the Height and Width to 100%,

A simpler approach for certain use cases is to set the iframe’s width and height attributes to 100%, allowing it to take up all available space relative to its container.

<iframe width="100%" height="100%" src="URL" ></iframe>

Note: This approach works well when the iframe’s container has defined dimensions. However, it may not be suitable for all scenarios, especially if the content’s dimensions vary.

Example:

HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h4 style="color:#006400; font-size:24px;"> Adjust width and height manually to fit iframe content </h4> <div id="frame"> <iframe width="100%" height="100%" src="iframe Pge.html" id="iFrame1"></iframe> </div> </body> </html>

Output

3. Using the CSS resize Property (Not Dynamic)

You can also use the CSS resize property to allow users to manually resize the iframe. While this is not a dynamic solution, it provides flexibility in certain cases.

  • The resize: both; property allows the user to resize the iframe both horizontally and vertically.
  • The overflow: auto; property ensures scroll bars appear if the content exceeds the iframe’s size.

Example:

html <html> <head> <style> #frame{ width:300px; height:200px; resize:both; } </style> <h4 style="color:#006400; font-size:24px;"> Adjust width and height manually to fit iframe content using CSS </h4> </head> <body style="background-color:#ffffff"> <iframe height="100%" width="100%" style="border:3px solid black;" src="iframe Pge.html" id="frame"></iframe> </body> </html>

Output :

Comment More info Next Article How to get the width and height of an element in jQuery ?

S

SoumikMondal Follow Improve

Từ khóa » Html Iframe Adjust Height To Content