Although not that widely supported, I have found a way to make 100% height with CSS work in IE, Firefox and Opera. Three of the most major browsers right now. Today, I show you how to accomplish this fun little trick. First we must look at the html and body tags. In CSS’ eyes, these tags are block level elements. Meaning by default that they have a value of auto height and width. Changing these values in your CSS, you can quickly add 100% height to your design.

Here’s the code:
html, body {height: 100%;}

And there you have it. Wasn’t that easy? Now any time you add an element within your page, you can give it a value of a 100% height using CSS! If your still a little confused, thats ok. I wrote a quick page for you to use as a way of learning.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Call me Jack | 100% Height with CSS</title>
<style>
html, body {margin: 0; padding: 0;}
html, body, div {height: 100%;}
div {width: 50%; background-color: green; margin: 0px auto 0px; text-align: center; padding: 20px;}
</style>
</head>
<body>
<div><a href="http://callmejack.wordpress.com" target="_blank">Call me Jack</a></div>
</body>
</html>

Click here to see it in action!