I was making a template and decided to go with DIVs rather than tables. Everything was fine, but I couldn't get 100% height and also had issues with the footer. I noticed a lot of people having this same issue, but all the "fixes" and examples I found sucked. Here is how I got around the issue. Tested in IE 7/8 and Firefox 3
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS 100% height on div + floating sticky footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0; }
html, body {
margin: 0px 0px 0px 0px;
min-height: 100%;
height: 100%;
}
.container {
height: auto !important;
min-height: 100%;
height: 100%;
width: 100%;
margin: 0 auto -21px;
}
.header {
top: 0px;
height: 100px;
/* added color for clarity */
background-color: #000;
color: #fff;
}
.footer {
height: 20px;
/* added color for clarity */
background-color: #000;
color: #fff
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header"> <p>Header</p> </div>
<!-- Content -->
<div class="content">
<p>Content at 100%. Adding more will cause the footer to move down as expected.</p>
</div>
</div>
<!-- FOOTER -->
<div class="footer"> <p>Footer</p> </div>
</body>
</html>
