This is how I did it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
body, html{
height:100%;
margin: 0px;
position:relative;
}
.content{
top: 10em;
/*next line is here because IE6 ignores bottom when top is defined.
The line itself will be ignored by other browsers */
/*take care because the value for the bottom offset is calculated in function
of the top, because we want to be dependent on em units */
height:expression(offsetParent.offsetHeight - offsetTop*2 + 'px');
bottom: 10em;
width:40%;
position:absolute;
background-color:red;
}
</style>
</head>
<body style="background-color:yellow">
<div class="content">
test
</div>
</body>
</html>
Note the tricks I had to do for getting the thing working in IE6: since top and bottom are not working correctly together (see bug report on quirksmode), I had to use expression here, which introduces sone javascript in the css. Also important: the header and footer have fixed heights defined as em, so if the user chooses the increase/decreaase fonts, the header/footer scales along.
Geen opmerkingen:
Een reactie posten