February 7, 2015

iframe with 100% height - Working

iframe with 100% height - Working

I recently searched the web and couldn't find a solution for "How to make an iframe with 100% of height?". You too won't be finding a solution to it. You probably tried writing something like:

Coding

<iframe width=100% height=100%></iframe> 

But the result won't be what you have expected. The width=100% does what you expected and fills up the entire page width. Whereas the height does not fill up the entire height.

Here's some easy JavaScript to do as you have expected:

JavaScript

function resize_iframe() {
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight) {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("resize-iframe").style.height=parseInt(height-
   document.getElementById("resize-iframe").offsetTop-8)+"px";
}
window.onresize=resize_iframe;

HTML

<iframe id="resize-iframe" width="100%" onload="resize_iframe()"></iframe>

Note:

Instead of writing window.onresize=resize_iframe; in JavaScript you can also call the function onresize by writing like:

<body onresize="resize_iframe()">

Popular Posts

Views