Log in

View Full Version : div height attribute


neilkw
08-11-2006, 08:29 AM
Hi,

Is it possible to configure a div which is 10 pixels wide to always expand and contract to fit browser windows height?
jscheuer1
08-11-2006, 09:11 AM
Seems to require javascript enabled in IE (for the expression style rule) all others seem fine with pure style:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#high {
width:10px;
height:100%;
position:absolute;
background-color:green;
bottom:0;
left:0;
}
* html #high {
height:expression(document.all.tags('html')[0].offsetHeight+'px');
}
</style>
</head>
<body>
<div id="high"></div>

</body>
</html>
neilkw
08-11-2006, 09:19 AM
V smart. cheers
mwinter
08-11-2006, 09:23 PM
Seems to require javascript enabled in IE (for the expression style rule) ...

Shouldn't do. Remember that percentage values for the height property require that an explicit height declaration is applied to the containing block.

To get an element to fill the viewport vertically, both the html and body elements need to be set to 100% height, as well as any elements between body and the target element itself (though percentages that would compute to 100%, like 150% and 66.7%, would be fine, too). Note that ideally, one should use the min-height property so that the elements may expand if necessary (though IE is broken and the height property will do this anyway).



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

You could (and convention says one would) replace "/1999/REC-html401-19991224/" in that system identifier with "/html4/".

Mike