将Div的高度设置为等于父标记

时间:2010-04-29 15:23:30

标签: html stylesheet

我有一个剪辑代码HTML,如下所示:

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

我将div的高度设置为100%,以便它充满TD,但它没有效果。

请帮助我!

谢谢/ PD

1 个答案:

答案 0 :(得分:0)

尝试设置要继承的高度:

height: inherit;