100% height of a div inside a TD

Discussion in 'ASP General' started by Lamberti Fabrizio, Aug 28, 2005.

  1. I've got the problem described in the table above.

    I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

    I've defined the following styles:

    div.test { background-color:red; height:100%; width: 100%; }
    table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    td.test { border: 1px solid #CCCCCC; }

    does anyone know a solution ?

    Please help me.

    Regards to all

    2
    2b 1
    4 5
    7 8
     
    Lamberti Fabrizio, Aug 28, 2005
    #1
    1. Advertising

  2. Lamberti Fabrizio

    McKirahan Guest

    "Lamberti Fabrizio" <._cut_off> wrote in message news:DIfQe.111047$...
    I've got the problem described in the table above.

    I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

    I've defined the following styles:

    div.test { background-color:red; height:100%; width: 100%; }
    table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    td.test { border: 1px solid #CCCCCC; }

    does anyone know a solution ?

    Please help me.

    Regards to all

    2
    2b 1
    4 5
    7 8


    Change
    <TD class=test><DIV class=test>1</DIV></TD>
    to
    <TD class=test><DIV class=test>1<br>&nbsp;</DIV></TD>
     
    McKirahan, Aug 28, 2005
    #2
    1. Advertising

  3. I can't use your solution, because the table is compiled runtime and so I can't know before the maximum lenght of 1 td for setting the correct width style.
    "McKirahan" <> wrote in message news:...

    "Lamberti Fabrizio" <._cut_off> wrote in message news:DIfQe.111047$...
    I've got the problem described in the table above.

    I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

    I've defined the following styles:

    div.test { background-color:red; height:100%; width: 100%; }
    table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    td.test { border: 1px solid #CCCCCC; }

    does anyone know a solution ?

    Please help me.

    Regards to all

    2
    2b 1
    4 5
    7 8


    Change
    <TD class=test><DIV class=test>1</DIV></TD>
    to
    <TD class=test><DIV class=test>1<br>&nbsp;</DIV></TD>
     
    Lamberti Fabrizio, Aug 28, 2005
    #3
  4. Lamberti Fabrizio wrote:
    > I've got the problem described in the table above.
    >
    > I've put a div red with some text inside a TD, but its height is less
    > than 100% of TD height as you can see.
    >
    > I've defined the following styles:
    >
    > div.test { background-color:red; height:100%; width: 100%; }
    > table.test { border: 1px solid #CCCCCC; background-color:yellow; }
    > td.test { border: 1px solid #CCCCCC; }
    >
    > does anyone know a solution ?


    I would start by fixing your validation problems, especially the improper
    nesting ones:

    line 8 column 24 - Warning: missing </font> before <div>
    line 8 column 7 - Warning: missing </font> before <div>
    line 10 column 1 - Warning: inserting implicit <font>
    line 10 column 1 - Warning: inserting implicit <font>
    line 10 column 1 - Warning: missing </font> before <style>
    line 10 column 1 - Warning: <style> isn't allowed in <font> elements
    line 40 column 1 - Warning: <style> isn't allowed in <div> elements
    line 40 column 1 - Warning: <style> isn't allowed in <div> elements
    line 94 column 53 - Warning: discarding unexpected </font>
    line 94 column 60 - Warning: discarding unexpected </font>
    line 3 column 7 - Warning: inserting missing 'title' element
    line 6 column 1 - Warning: <style> inserting "type" attribute
    line 10 column 1 - Warning: <style> inserting "type" attribute
    line 41 column 1 - Warning: <style> inserting "type" attribute
    line 62 column 1 - Warning: <style> inserting "type" attribute
    line 6 column 1 - Warning: trimming empty <style>
    line 8 column 24 - Warning: trimming empty <font>
    line 8 column 7 - Warning: trimming empty <font>

    Then get all of the garbage out. You don't need three instances of the same
    style rules. When all is said and done, there is a simple solution. Here is
    a complete document that does what you want (and validates):



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    table {
    width: 300px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    background-color: #ff0;
    }
    td {
    border: 1px solid #ccc;
    height: 100%;
    }
    td div {
    background-color: #f00;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <table>
    <tr><td>2<br>2b</td>
    <td><div>1</div></td></tr>
    <tr><td>4</td>
    <td>5</td></tr>
    <tr><td>7</td>
    <td>8</td></tr>
    </table>
    </body>
    </html>



    --
    Dave Anderson

    Unsolicited commercial email will be read at a cost of $500 per message. Use
    of this email address implies consent to these terms. Please do not contact
    me directly or ask me to contact you directly for assistance. If your
    question is worth asking, it's worth posting.
     
    Dave Anderson, Aug 29, 2005
    #4
    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,062
    Not4u
    Feb 27, 2004
  2. Lamberti Fabrizio

    100% height of a div inside a TD

    Lamberti Fabrizio, Aug 29, 2005, in forum: HTML
    Replies:
    8
    Views:
    13,092
    Lamberti Fabrizio
    Aug 29, 2005
  3. Replies:
    8
    Views:
    6,739
    Neredbojias
    Dec 9, 2005
  4. fred
    Replies:
    3
    Views:
    306
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    919
Loading...

Share This Page