A blog on technology and web culture

Guy Malachi

Source CodeIframe with 100% Height

Ever wonder how to create an iframe that fills the entire height (and width) of a page?
You probably tried writing something like:
<iframe width=100% height=100%></iframe>
and expected the iframe to fill up whatever it could.
The width=100% does what you expected and fills up the entire width of the page, but the height just stays about 200px.

Here's some easy JavaScript to do exactly this:

Put this in the head of your page:
<script language="JavaScript">
function resize_iframe()

	var height=window.innerWidth;//Firefox
	if (document.body.clientHeight)
	//resize the iframe according to the size of the
	//window (all these should be on the same line)

// this will resize the iframe every
// time you change the size of the window.

//Instead of using this you can use: 
//	<BODY onresize="resize_iframe()">

And inside your page's body create the iframe tag:
<iframe id="glu" width="100%" onload="resize_iframe()">

If you decide to use this code all I ask is that you .
© 2011 Guy Malachi atguy.com, All Rights Reserved