resize div height
In html page there is only one div. I want div to resize while user resizes the browser window. Html code is as belows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#container {
margin: 20px auto 0 auto;
width: 700px;
background-color:Gray;
}
</style>
<script type="text/javascript">
window.onload = function(){setTimeout("container.style.height = document.documentElement.clientHeight * 0.9 + 'px';", 50);};
window.onresize = function()
{
container.style.height = document.documentElement.clientHeight * 0.9 + 'px';
}
</script>
</head>
<body>
<div id="container">container</div>
</body>
</html>
It works fine in IE 7, but doesn't work in Firefox 2.0.0.7.
Any idea?
[1183 byte] By [
jasonli] at [2007-11-20 11:27:24]
# 1 Re: resize div height
Any idea?
Yes. It is because you are using "IE language" in your code.
1. You have not defined container before changing its styles. This will work in IE because IE is a document.all base browser.
2. documentElement.clientHeight is going to bring cross-browser issues.
<script type="text/javascript">
var windowHeight;
if(self.innerHeight){windowHeight = self.innerHeight;}
else if(document.documentElement && document.documentElement.clientHeight){windowHeight = document.documentElement.clientHeight;}
else{windowHeight = document.body.clientHeight;}
window.onload = function(){
var container = document.getElementById('container');
container.style.height = windowHeight * 0.9 + 'px';
}
window.onresize = function(){
var container = document.getElementById('container');
container.style.height = windowHeight * 0.9 + 'px';
}
</script>
