Table Height 100%

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hi!
I'm using VS 2005 and I can't desing a table with height="100%". With the
width=100% works ok, but the height always fit the controls inside the table.
This is an example:

<!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>
<form id="form1" runat="server">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<span>HI</span>
</td>
</tr>
</table>
</form>
</body>
</html>

This code in VS 2003 works.
The question is how to set a table height to fit the browser height.
Thanks
 
Are you sure this is the exact same code used in the two versions and did
you check to see it's behavior in a browser also? The height attribute for a
table is virtually ignored by most browsers, which is part of the problem.
I've found setting the height as a style element works better. Keep in mind,
you'll also need to set the height to 100% on the elements that the table is
nested within. You could tell the table to be 100%, but it's 100% of the
enclosing container, not the page. You would also need it on the form
element as well. Some people suggest wrapping the form in a <div> that also
has the height and width set to 100% through a style.
 
Hi Mark! Thanks for your reply.
I've tried using style="width:100%;height;100%" but don't change anything.
If I remove this element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And remove this attribute from html tag
xmlns="http://www.w3.org/1999/xhtml". the table fit the browser height and
works ok, but the ajax ModalPopUp control don't work. I saw that these
elementes don't appears in VS 2003 templeate page.

I must replace the table for a div?

Thanks
 
in w3c browsers (or ie in xhtml or html 4.0 mode), the body does not
have a height. 100% are also a percent of the parent, if the parent does
not have an absolute height, then its ignored.

older version of IE had a bug, where the body height defaulted to window
size, this has been fixed. switching to a div will not help.

to correctly do this, create a div for the page with no border, or
margin, and use client script to set the height to an absolute value on
onload and onresize. inside the div you an use 100% if you want.

-- bruce (sqlwork.com)
 
I must replace the table for a div?

If I'm reading Mark's suggestion right, you don't replace the table--leave
it so its height occupies 100% of its container, but put a container div
around your table. Style the div so *its* height matches the whole page.

This is entirely off the top of my head--but I believe I've had some luck in
the past doing some of that client-side, in the body's onload(). I used
something like:

var myDiv = document.getElementById( "idMyDiv" );
myDiv.style.height = document.body.clientHeight.toString() + "px";

You may need to tinker with document.body.clientHeight (or use something
else entirely to figure out the appropriate height to use). YMMV. I may be
full of crap.
 
Thanks for the explanation!
I'll set the div height to document.bod.clientHeight and the table inside
the div to 100%.
Thanks again.
 
Thanks for the explanation!
I'll set the div height to document.bod.clientHeight and the table inside
the div to 100%.
Thanks again.
Click to expand...

Please let me know if this works. It's been a while I've done this, and I
can't find the code snippet right now...I'm as curious as you are...
 
Hi Homer. Unfortunately the code doesn't works. I've used this code. I've
debug the javascript and the document.body.clientHeight is 23 :S

<!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 onload="Page_OnLoad();" onresize="Page_OnResize();" leftmargin="0"
rightmargin="0" bottommargin="0" topmargin="0">
<form id="form1" runat="server">
<div id="divPageContainer">
<table cellpadding="0" cellspacing="0" width="100%"
height="100%" border="1">
<tr>
<td>
HI
</td>
</tr>
</table>
</div>
</form>
</body>
<script language="javascript" type="text/javascript">

function Page_OnLoad()
{
document.getElementById("divPageContainer").style.width =
document.body.clientWidth;
document.getElementById("divPageContainer").style.height =
document.body.clientHeight;
}

function Page_OnResize()
{
document.getElementById("divPageContainer").style.width =
document.body.clientWidth;
document.getElementById("divPageContainer").style.height =
document.body.clientHeight;
}

</script>
</html>

If somebody know how to set the table height to the client browser height
let me know =(

Thanks
 
Hi Homer. Unfortunately the code doesn't works. I've used this code. I've
debug the javascript and the document.body.clientHeight is 23 :S
Click to expand...

Well, you might still be able to do something useful with the basic idea.

Instead of using document.body.clientHeight, temporarily hardcode the height
to, say, 500 and reload the page...does your table now get that size? If
so, you've solved your original problem. Now the next thing to tackle is
finding the right element in the DOM to give you the current window's
dimensions. That might vary from one browser to another. I remember seeing
various suggestions, and in my case (IE6), this is what gave me the correct
results.

I think I was using a div, but cannot remember if a table inside set to 100%
followed the div's size.
 
Hi Homer. I'm ussing IE 6 too. I've hardcoded the height to 500 and the
table size was modified. I've watch the document element in the VS2005 and
any element or attribute has a reasonable height.

THanks ,If I found a solution I'll post it.
 
Ok
I've set the body style="width:100%;height:100%" and works! =)
This is the code of the page:

<!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="width:100%;height:100%" onload="Page_OnLoad();"
onresize="Page_OnResize();" leftmargin="0" rightmargin="0" bottommargin="0"
topmargin="0">
<form id="form1" runat="server">
<div id="divPageContainer" style="width:100%; height:100%">
<table cellpadding="0" cellspacing="0" width="100%"
height="100%" border="1">
<tr>
<td align="center" valign="middle">
HI
</td>
</tr>
</table>
</div>
</form>
</body>
<script language="javascript" type="text/javascript">

function Page_OnLoad()
{
document.getElementById("divPageContainer").style.width =
document.body.clientWidth;
document.getElementById("divPageContainer").style.height =
document.body.clientHeight;
}

function Page_OnResize()
{
document.getElementById("divPageContainer").style.width =
document.body.clientWidth;
document.getElementById("divPageContainer").style.height =
document.body.clientHeight;
}

</script>
</html>
 
And if I remove the javascript code the page works. So the solution is set
style="width:100%;height:100%" to the body element. =)

Regards
 
Kevin said:
And if I remove the javascript code the page works. So the solution is set
style="width:100%;height:100%" to the body element. =)
Click to expand...

And also use css to set the height of the table. The table element
doesn't have a height attribute at all, it's only Internet Explorer that
thinks that it does.
 
And if I remove the javascript code the page works. So the solution is
And also use css to set the height of the table. The table element doesn't
have a height attribute at all, it's only Internet Explorer that thinks
that it does.
Click to expand...

Good to know. Thanks for the follow-up.
 
Back
Top