Set Height of Div Equal to Parent Tag

Question

I have a snip code HTML as below :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta name="GENERATOR" content="Microsoft SharePoint" />
    <meta name="progid" content="SharePoint.WebPartPage.Document" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="0" />
    <title>Demo </title>
    <style type="text/css">
        A
        {
            font-weight: normal;
            font-size: 10pt;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=AWRyZDbGxZSekWBubaxPXw%3D%3D" />
    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=w9FW7ASZnUjiWWCtJEcnTw%3D%3D" />
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height:100%;">
    <form method="" name="frm">
    <table style="border-bottom: black 1px solid; border-left: black 1px solid; border-collapse: collapse;
        border-top: black 1px solid; border-right: black 1px solid" id="ctl00_m_g_510fd150_a968_41ee_a28d_d47ff4a7198e_BambooCalendarControl"
        height="100%">
        <tbody>
            <tr>
                <td style="border-top: black 1px solid; border-right: black 1px solid" height="25"
                    valign="top" rowspan="1" width="1%" align="right">
                    <span>
                        <nobr>8:00 AM</nobr>
                    </span>
                </td>
                <td style="border-bottom: #d4d0c8 1px dotted; background-color: #ccffcc; border-left: 0px;
                    border-top: black 1px solid; border-right: black 1px solid" height="100%" valign="top"
                    rowspan="8" width="50%">
                    <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; background-color: #ffa500;
                        height: 100%; overflow: hidden; border-top: gray 1px solid; border-right: gray 1px solid"
                        nowrap width="100%" valign="top">
                        <a style="height: 100%; color: black" href="#"><font color="white">Item </font></a>
                    </div>
                </td>
                <td style="border-bottom: #d4d0c8 1px dotted; border-left: 0px; border-top: black 1px solid;
                    border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1">
                </td>
            </tr>
            <tr>
                <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25"
                    valign="top" rowspan="1" width="1%" align="right">
                </td>
                <td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid"
                    height="25" valign="top" width="100%" colspan="1">
                </td>
            </tr>
            <tr>
                <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%"
                    align="right">
                    <span>
                        <nobr>9:00 AM</nobr>
                    </span>
                </td>
                <td style="border-bottom: #d4d0c8 1px dotted; background-color: #ccffcc; border-left: 0px;
                    border-right: black 1px solid" height="100%" valign="top" rowspan="4" width="50%">
                    <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; background-color: #bdb76b;
                        height: 100%; overflow: hidden; border-top: gray 1px solid; border-right: gray 1px solid"
                        nowrap width="100%" valign="top">
                        <a style="height: 100%; color: black" title="" href="#"><font color="white">Item 2 </font>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25"
                    valign="top" rowspan="1" width="1%" align="right">
                </td>
            </tr>
            <tr style="border-left: medium none; border-right: #696969 1px solid">
                <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%"
                    align="right">
                    <span>
                        <nobr>10:00 AM</nobr>
                    </span>
                </td>
            </tr>
            <tr>
                <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25"
                    valign="top" rowspan="1" width="1%" align="right">
                </td>
            </tr>
            <tr>
                <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%"
                    align="right">
                    <span>
                        <nobr>11:00 AM</nobr>
                    </span>
                </td>
                <td style="border-bottom: #d4d0c8 1px dotted; border-left: 0px; border-top: black 1px solid;
                    border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1">
                </td>
            </tr>
            <tr>
                <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25"
                    valign="top" rowspan="1" width="1%" align="right">
                </td>
                <td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid"
                    height="25" valign="top" width="100%" colspan="2">
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</body>
</html>

I set the height of the div 100% so that it full of TD but it did not effect.

Please help me !

Thanks / PD

Related duplicate questions: http://stackoverflow.com/questions/1664735/set-div-height-to-100-of-parent http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height http://stackoverflow.com/questions/1881032/how-to-size-a-divs-height-to-its-container-height-using-css — JYelton, Apr 29 '10 at 15:27
There is so much wrong with this it's hard to begin. For starters, you are going to get into a lot of trouble trying to use DIVs within table cells. Also, if you're using strict XHTML you can't have unvalued attributes (that's not the right term, but I can't think of it atm), like `nowrap`; that should be rendered as `nowrap="nowrap"`, etc. — Robusto, Apr 29 '10 at 15:33

score 0 · Answer 1 · answered Apr 29 '10 at 15:32

0

Try setting the heights to inherit:

height: inherit;

answered Apr 29 '10 at 15:32

Tim

6,986
8
38
57

Hello Tim, The Div Tag can not show full when I change the height = inherit; Thanks / PD – Phong Dang Apr 30 '10 at 11:03

Set Height of Div Equal to Parent Tag

1 Answers1