Table Height 100%

Discussion in 'ASP .Net' started by =?Utf-8?B?S2V2aW4=?=, Aug 29, 2007.

  1. 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
     
    =?Utf-8?B?S2V2aW4=?=, Aug 29, 2007
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:...
    > 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
     
    Mark Fitzpatrick, Aug 29, 2007
    #2
    1. Advertising

  3. 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" <> wrote in message
    > news:...
    > > 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

    >
    >
    >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 29, 2007
    #3
  4. =?Utf-8?B?S2V2aW4=?=

    bruce barker Guest

    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" <> wrote in message
    >> news:...
    >>> 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

    >>
    >>
     
    bruce barker, Aug 29, 2007
    #4
  5. > 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.
     
    Homer J. Simpson, Aug 29, 2007
    #5
  6. 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.
    >
    >
    >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 29, 2007
    #6
  7. > 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...
     
    Homer J. Simpson, Aug 29, 2007
    #7
  8. 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
     
    =?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=, Aug 29, 2007
    #8
  9. 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...
    >
    >
    >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 30, 2007
    #9
  10. > 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.
     
    Homer J. Simpson, Aug 30, 2007
    #10
  11. 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.

    "Homer J. Simpson" wrote:

    > > 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.
    >
    >
    >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 30, 2007
    #11
  12. 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>


    "Kevin" wrote:

    > 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.
    >
    > "Homer J. Simpson" wrote:
    >
    > > > 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.
    > >
    > >
    > >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 30, 2007
    #12
  13. 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" wrote:

    > 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>
    >
    >
    > "Kevin" wrote:
    >
    > > 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.
    > >
    > > "Homer J. Simpson" wrote:
    > >
    > > > > 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.
    > > >
    > > >
    > > >
     
    =?Utf-8?B?S2V2aW4=?=, Aug 30, 2007
    #13
  14. Kevin wrote:
    > And if I remove the javascript code the page works. So the solution is set
    > style="width:100%;height:100%" to the body element. =)


    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.

    --
    Göran Andersson
    _____
    http://www.guffa.com
     
    =?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=, Aug 30, 2007
    #14
  15. >> And if I remove the javascript code the page works. So the solution is
    >> set style="width:100%;height:100%" to the body element. =)

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


    Good to know. Thanks for the follow-up.
     
    Homer J. Simpson, Aug 31, 2007
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Not4u
    Replies:
    9
    Views:
    1,056
    Not4u
    Feb 27, 2004
  2. Paul Schmidinger

    table in table -> 100% height does not work

    Paul Schmidinger, Aug 10, 2004, in forum: HTML
    Replies:
    3
    Views:
    2,957
    roma1123
    Mar 24, 2011
  3. Replies:
    8
    Views:
    6,710
    Neredbojias
    Dec 9, 2005
  4. fred
    Replies:
    3
    Views:
    291
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    903
Loading...

Share This Page