Iframe with 100% height

A blog on technology and web culture

Guy Malachi

Home

The new site design is here!

Alfred open folder hotkey workflow

How to customize Alfred to work with Google Calendar (Alfred workflow)

Sh#%, I messed up

The 6 best apps for managing your tasks, now that Microsoft is killing Wunderlist

Snapchat trick - How to upload any photo to Snapchat without the white borders!

Why do we doodle

BE AN UNDERACHIEVER

3 best ways to stream videos to Chromecast

PHP code for fetching a remote file and saving it with the right file name

Why the top Super Bowl 2013 ads worked

How I proposed using a Chrome extension

Employee Equity by Fred Wilson

Why Draw Something Works

GrrReader

Discovering Apps

Designing a Logo

Twylah - Your Trending Tweets

Leaving Conduit

Techonomy3 - The Rundown

My Talk On Next Generation Game Platforms

Summing Up SXSW

2011 - What Will We See?

Traveler From The Future

We Don't Need No Stinkin' Code Monkeys

Source Code

Iframe 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)
	{
		height=document.body.clientHeight;//IE
	}
	//resize the iframe according to the size of the
	//window (all these should be on the same line)
	document.getElementById("glu").style.height=parseInt(height-
	document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

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


//-->
</script>

And inside your page's body create the iframe tag:

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

If you decide to use this code all I ask is that you .