JavaScript

Adjust the iFrame height to fit with content in JavaScript

You can use JavaScript’s contentWindow property to force “iFrame” to automatically adjust its height based on the content it contains, so that no vertical scroll bar appears. Here is an example:
 

How to Adjust the iFrame height to fit with content in JavaScript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Adjust the iFrame height to fit with content</title>
		<style>
			iframe{
				width: 100%;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
	   <iframe src="contact.php" frameborder="0" scrolling="no" onload="adjustIframe(this)" />
		<script>
		  function adjustIframe(obj) {
			obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
		  }
		</script>
	</body>
</html>
Note: This will not work if the iframe contains content from another domain.
mcqMCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More

Leave a Reply

Your email address will not be published. Required fields are marked *