How to set 100% height of HTML iFrame in all browsers

after searching over the google and spending some time me and my friend ali got this code working for us. I want to set the height of an iFrame 100% in all major browsers like IE,Mozzila,Chrome,Safari and Opera.  It can be done with the support of javascript. Here goes the code.

HTML iFrame Code:

<iframe align="center" id="iframe_id" name="iframe_id" src="http://www.paksmile.com/" scrolling="yes" width="100%" height="200px" frameborder="0" style="position:relative; bottom:0; left:0; top:0px;" onload="resize_iframe()">

The JavaScript Code:

<script language="JavaScript">
window.onresize = resize_iframe;

function resize_iframe() {



  var viewportwidth;

  var viewportheight;

  var header = document.getElementById("iframe_id").offsetTop;

  // the more standards compliant browsers (mozilla/netscape/opera) use window.innerWidth and window.innerHeight

  if (typeof window.innerWidth != 'undefined') {

    viewportwidth = window.innerWidth,

    viewportheight = window.innerHeight

    viewportheight = viewportheight - header;

  }



  // IE6,IE7 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

  else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {

    viewportwidth = document.documentElement.clientWidth,

    viewportheight = document.documentElement.clientHeight

    viewportheight = viewportheight - header;

  }



  // older versions of IE

  else {

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,

    viewportheight = document.getElementsByTagName('body')[0].clientHeight

    viewportheight = viewportheight - header;

  }



  //document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');

  var header = document.getElementById("iframe_id").offsetTop;

  document.getElementById("iframe_id").style.height=viewportheight+"px";

}



</script>


The CSS Code: (Optional)

<style type="text/css">
html, body{
overflow:hidden;
}
iframe {height:100%;}
</style>

Comments

Popular Posts

GREYCstoration Oil Paint plugin for Photoshop

Service Bus Gateway service stuck at Starting

PowerApps SubmitForm not clearing People Picker value

Apple iPhone sending SMS automatically 00447786205094

SharePoint online hub navigation not updating for other users