Categories:
Partners

Defining Dynamic Properties inside a global style sheet

You heard it right- you can define dynamic properties within global style sheets. This is probably how you'll be declaring most of your dynamic properties. In the below example, I enlist the help of dynamic properties to easily create a left column div that spans the height of the viewable window even if the page is resized:

<style>
#leftcolumn{
background-color: navy;
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 700px; /*default height*/
height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight+'px' : body.clientHeight+'px');
}
</style>

<body>
<div id="leftcolumn">Left column...</div>

First I declare a height for the DIV that will be picked up by all browsers, then for IE, take advantage of dynamic properties to create a self adjusting DIV.