How can I make a div's height 100% of a dynamic TD?

Last post 11-07-2009 1:59 PM by Danish Ali. 4 replies.

Sort Posts:

  • How can I make a div's height 100% of a dynamic TD?

    11-07-2009, 11:02 AM
    • Member
      314 point Member
    • Boddam
    • Member since 04-13-2006, 3:18 AM
    • Posts 261

    Classic problem. I have a table which is dynamically rendered and the height varies with content from one TD. Next to this TD I have another TD whith a DIV I would like to have 100% of that TD cell. Any solution?


  • Re: How can I make a div's height 100% of a dynamic TD?

    11-07-2009, 1:25 PM
    • Member
      722 point Member
    • designerSid
    • Member since 08-19-2009, 4:39 PM
    • Mehta
    • Posts 129

    Simple!

    Use height:100%, overflow:auto

    Thanks 

    Siddhant Mehta
    Web UI Designer, uAchieveIt

    "Age doesn't matter, experience does"
  • Re: How can I make a div's height 100% of a dynamic TD?

    11-07-2009, 1:32 PM
    • Member
      314 point Member
    • Boddam
    • Member since 04-13-2006, 3:18 AM
    • Posts 261

    designersid:

    Simple!

    Use height:100%, overflow:auto

    Thanks 



    Hi!

    That didnt work for me, this is how i tried:

    <table>
    <tr><td valign="top">
        <div style="height:100%;overflow:auto;">
        </div>
    </td><td valign="top">
    Dynamic content, height varies
    </td></tr>
    </table>

  • Re: How can I make a div's height 100% of a dynamic TD?

    11-07-2009, 1:52 PM
    Answer
    • Member
      314 point Member
    • Boddam
    • Member since 04-13-2006, 3:18 AM
    • Posts 261

    nevermind, setting table, td, and div to 100% did it.

  • Re: How can I make a div's height 100% of a dynamic TD?

    11-07-2009, 1:59 PM
    • Contributor
      3,384 point Contributor
    • Danish Ali
    • Member since 08-08-2008, 7:22 PM
    • Fort Lauderdale, US
    • Posts 468

    Modify your html as follows and it should work. Div always takes the height of it's container, so by setting the height of body and table to 100% should work.

    <body style="height:100%">
        <form id="form1" runat="server">
        <table border="1" style="height:100%">
            <tr>
                <td valign="top" style="height:100%">
                    <div style="height:auto">
                    </div>
                </td>
                <td valign="top">
                    Dynamic content, height varies
                </td>
            </tr>
        </table>
        </form>
    </body>

    <body style="height:100%">

        <form id="form1" runat="server">

        <table border="1" style="height:100%">

            <tr>

                <td valign="top" style="height:100%">

                    <div style="height:auto">

                    </div>

                </td>

                <td valign="top">

                    Dynamic content, height varies

                </td>

            </tr>

        </table>

        </form>

    </body>


    If my post solves your problem, please mark it as an answer.
Page 1 of 1 (5 items)