Log in

View Full Version : Want to create a div in a page to acquire full page height


registeredspider
02-04-2009, 01:09 PM
I created a div (testdiv) and want it to acquire full screen height in IE and FF. It wis working fine in IE but in FF it is not working...:mad:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

<div id="testdiv" style="background:red;">Content for id "testdiv" Goes Here</div>

<script language="javascript">

var frame = document.getElementById("testdiv");


frame.style.height =parseInt(document.documentElement.clientHeight) - 156;

</script>
</body>
</html>


please help me out to make it work in FF thank u :D
jscheuer1
02-04-2009, 05:19 PM
There are a number of heights involved with the computer monitor and the browser. Before I can answer this question I would need to know which one you want your division to be. There are:


The height of the screen.
The available height on the screen.
The height of the browser.
The height of the viewable area in the browser window.
The height of the page within the browser window.


Which one of these are you after?
vwphillips
02-04-2009, 05:24 PM
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

<div id="testdiv" style="background:red;">Content for id "testdiv" Goes Here</div>
<script language="javascript">

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}



var frame = document.getElementById("testdiv");

frame.style.height =zxcWWHS()[1] - 156+'px';

</script>
</body>
</html>
registeredspider
02-05-2009, 05:50 AM
thank you.. Phillips..