V
Victor
Hi I have a very strange problem for my page. I have writen a js to make
sure my table's height is 100% for the browser's viewport. my code is just
the following. This works fine for firefox and IE. but in netscape, i found
there is some white space at the bottom of the page whose height is about
10- 20 pixal. and these white space cause the v-scrollbar appears. I have no
idea what is wrong here. Can any one help me on this one.
Cheers
Victor
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body style="padding:0;margin:0; ">
<form id="form1" runat="server">
<script type="text/javascript">
function getWindowHeight()
{
var windowHeight=0;
var minWindowHeight = 700;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else
{
if (document.documentElement&&
document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body&&document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
if (windowHeight < minWindowHeight)
windowHeight = minWindowHeight;
return windowHeight;
}
function setHeight()
{
if (document.getElementById)
{
var windowHeight=getWindowHeight();
if (windowHeight > 0)
{
var tblMain = document.getElementById("tblMain");
tblMain.style.height = windowHeight + 'px';
}
}
}
window.onload = function() {setHeight();}
window.onresize = function() {setHeight();}
</script>
<table id="tblMain" cellpadding="0" cellspacing="0" width="980px"
style="border:solid 1px red;">
<tr>
<td>
testing info
</td>
</tr>
</table>
</form>
</body>
</html>
sure my table's height is 100% for the browser's viewport. my code is just
the following. This works fine for firefox and IE. but in netscape, i found
there is some white space at the bottom of the page whose height is about
10- 20 pixal. and these white space cause the v-scrollbar appears. I have no
idea what is wrong here. Can any one help me on this one.
Cheers
Victor
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body style="padding:0;margin:0; ">
<form id="form1" runat="server">
<script type="text/javascript">
function getWindowHeight()
{
var windowHeight=0;
var minWindowHeight = 700;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else
{
if (document.documentElement&&
document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body&&document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
if (windowHeight < minWindowHeight)
windowHeight = minWindowHeight;
return windowHeight;
}
function setHeight()
{
if (document.getElementById)
{
var windowHeight=getWindowHeight();
if (windowHeight > 0)
{
var tblMain = document.getElementById("tblMain");
tblMain.style.height = windowHeight + 'px';
}
}
}
window.onload = function() {setHeight();}
window.onresize = function() {setHeight();}
</script>
<table id="tblMain" cellpadding="0" cellspacing="0" width="980px"
style="border:solid 1px red;">
<tr>
<td>
testing info
</td>
</tr>
</table>
</form>
</body>
</html>