<iframe> with 100% Height supporting window resizes, IE & Firefox
Background:
Need to create a resizeable html <iframe> element that stretches to almost the full height of a window.
Expected:
<iframe width="100%" height="100%"></iframe>
to work.
Problem Description:
Setting the iframe.style.width=100% CSS property was incorrectly using the full height of the window and didn't factor the resize event.
Problem Solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body, h1 {margin:0px; text-align:center; color:#000;}
#header_div {background-color:red;}
#diagnosed_site {width:99%; height:100%;}
* html #diagnosed_site {width:100%;} /* IE workaround - firefox needs a 99% width to avoid a horizontal scroll-bar */
</style>
<script>
function resize_iframe() {
var body_height = document.body.clientHeight;
var header_height = document.getElementById("header_div").offsetHeight;
var iframe = document.getElementById("diagnosed_site");
iframe.style.height = parseInt(body_height) - parseInt(header_height) - 5;
}
</script>
</head>
<body onload="resize_iframe()" onresize="resize_iframe()">
<div id="header_div">
<h1>Iframe Test</h1>
</div>
<iframe src="http://www.kangarooit.com/" id="diagnosed_site"></iframe>
</body>
</html>
Need to create a resizeable html <iframe> element that stretches to almost the full height of a window.
Expected:
<iframe width="100%" height="100%"></iframe>
to work.
Problem Description:
Setting the iframe.style.width=100% CSS property was incorrectly using the full height of the window and didn't factor the resize event.
Problem Solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body, h1 {margin:0px; text-align:center; color:#000;}
#header_div {background-color:red;}
#diagnosed_site {width:99%; height:100%;}
* html #diagnosed_site {width:100%;} /* IE workaround - firefox needs a 99% width to avoid a horizontal scroll-bar */
</style>
<script>
function resize_iframe() {
var body_height = document.body.clientHeight;
var header_height = document.getElementById("header_div").offsetHeight;
var iframe = document.getElementById("diagnosed_site");
iframe.style.height = parseInt(body_height) - parseInt(header_height) - 5;
}
</script>
</head>
<body onload="resize_iframe()" onresize="resize_iframe()">
<div id="header_div">
<h1>Iframe Test</h1>
</div>
<iframe src="http://www.kangarooit.com/" id="diagnosed_site"></iframe>
</body>
</html>
0 Comments:
Post a Comment
<< Home