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:

HTML Code:

<!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

Originally Posted by jscheuer1

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

Thread: div height attribute

Thread Tools

Search Thread

div height attribute

Bookmarks

Bookmarks

Posting Permissions