Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Table Height 100%

Reply
Thread Tools

Table Height 100%

 
 
=?Utf-8?B?S2V2aW4=?=
Guest
Posts: n/a
 
      08-29-2007
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
 
Reply With Quote
 
 
 
 
Mark Fitzpatrick
Guest
Posts: n/a
 
      08-29-2007
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.


--
Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage

"Kevin" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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



 
Reply With Quote
 
 
 
 
=?Utf-8?B?S2V2aW4=?=
Guest
Posts: n/a
 
      08-29-2007
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



"Mark Fitzpatrick" wrote:

> 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.
>
>
> --
> Hope this helps,
> Mark Fitzpatrick
> Microsoft MVP - FrontPage
>
> "Kevin" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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

>
>
>

 
Reply With Quote
 
bruce barker
Guest
Posts: n/a
 
      08-29-2007
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)

Kevin wrote:
> 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
>
>
>
> "Mark Fitzpatrick" wrote:
>
>> 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.
>>
>>
>> --
>> Hope this helps,
>> Mark Fitzpatrick
>> Microsoft MVP - FrontPage
>>
>> "Kevin" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>> 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

>>
>>

 
Reply With Quote
 
Homer J. Simpson
Guest
Posts: n/a
 
      08-29-2007
> 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.


 
Reply With Quote
 
=?Utf-8?B?S2V2aW4=?=
Guest
Posts: n/a
 
      08-29-2007
Thanks for the explanation!
I'll set the div height to document.bod.clientHeight and the table inside
the div to 100%.
Thanks again.

"Homer J. Simpson" wrote:

> > 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.
>
>
>

 
Reply With Quote
 
Homer J. Simpson
Guest
Posts: n/a
 
      08-29-2007
> Thanks for the explanation!
> I'll set the div height to document.bod.clientHeight and the table inside
> the div to 100%.
> Thanks again.


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...


 
Reply With Quote
 
=?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=
Guest
Posts: n/a
 
      08-29-2007
Kevin wrote:
> Hi Mark! Thanks for your reply.
> I've tried using style="width:100%;height;100%" but don't change anything.


Change height; to height:

--
Göran Andersson
_____
http://www.guffa.com
 
Reply With Quote
 
=?Utf-8?B?S2V2aW4=?=
Guest
Posts: n/a
 
      08-30-2007
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

"Homer J. Simpson" wrote:

> > Thanks for the explanation!
> > I'll set the div height to document.bod.clientHeight and the table inside
> > the div to 100%.
> > Thanks again.

>
> 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...
>
>
>

 
Reply With Quote
 
Homer J. Simpson
Guest
Posts: n/a
 
      08-30-2007
> 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


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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
table in table -> 100% height does not work Paul Schmidinger HTML 3 03-24-2011 03:47 PM
getting exact height of a panel with a height="100%" samer ASP .Net 3 09-28-2009 05:21 PM
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM



Advertisments