How to set height to 100%?

Hi,

I think we’ve answered the question already unless we misunderstood.

If perhaps you wanted a fixed height header at the top of the screen and a fixed height footer at the bottom of the screen and then the content in the middle stretches between the two with its own scrollbar then you can do that like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%;
}
#content, #footer {
	position:absolute;
	top:100px;
	bottom:100px;
	overflow:auto;
	width:100%;
	background:blue;
}
#footer {
	top:auto;
	bottom:0
}
#header, #footer {
	height:98px;
	border-bottom:1px solid #000;
	border-bottom:1px solid #000;
	background:red;
	overflow:hidden;
}
</style>
</head>
<!-- won't work in ie6 -->
<body>
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</body>
</html>


It won’t work in IE6 though (which shouldn’t be a problem these days).