In modern web development, it is not uncommon to use iframes to embed content from different pages. This is especially true for embedding blog parts or social media widgets, where the use of iframes is often unavoidable. However, one of the challenges that come with using iframes is auto-adjusting the height according to the embedded page. Differences in height can cause scroll bars to appear, negatively impacting both design and usability. This article introduces a simple method using CSS and JavaScript to solve this problem.
Auto-Adjusting Iframe Height: CSS Code Snippet
When embedding an iframe, it is crucial to set up the CSS correctly. The following style sets the size of the container holding the iframe to 80% of the screen width and ensures no scroll bars are displayed. The style for the iframe itself removes any extra borders and sets the width to 100%.
<style type="text/css" media="all">
<!--
.clWrap{
width:80%;
margin:0 auto;
overflow:hidden;
border:solid 1px #999999;
}
iframe {
padding:0;
width:100%;
overflow:hidden;
border:none;
}
-->
</style>
Dynamic Adjustment of Iframe Height: JavaScript Code Snippet
Next, let’s look at the implementation of JavaScript to dynamically adjust the height of the iframe after the page has loaded. This method uses jQuery to calculate the height of the iframe after it is loaded and applies it to the iframe tag.
Load jquery.min.js (version 1.8). After the iframe is loaded, the height is retrieved using .height.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('iframe').load(function(){
if (typeof $(this).attr('height') == 'undefined') {
// Set the height of the iframe based on the embedded page
$(this).height(this.contentWindow.document.documentElement.scrollHeight+10);
}
});
// Handle iframe loading
$('iframe').triggerHandler('load');
});
</script>
HTML Markup Example: HTML Code Snippet
In actual HTML markup, use the above CSS and JavaScript to appropriately embed the iframe. In the example below, the iframe is placed within a div element with the class clWrap, displaying the content without scroll bars.
<div class="clWrap">
<iframe src="/about/" scrolling="no" frameborder="0"></iframe>
</div>
<!--/clWrap-->
Demo Page Displaying Iframe Height Adjusted Using contentWindow and scrollHeight
A demo page that implements these codes is also available. You can check how the iframe content automatically adjusts its height through the following link.
Demo: Adjusting Iframe Height Using contentWindow and scrollHeight
Conclusion
While using iframes for embedding pages is useful for tech blogs and widget services, it is generally best avoided on standard websites from a UX (user experience) perspective. However, by utilizing the methods introduced here, you can effectively control the height of the iframe, offering a comfortable page view for the user.
*Please use at your own risk if repurposing. Do not repurpose the Google Analytics tag inside the demo page tags.
