tags:

views:

149

answers:

1
Q: 

Set Height of Div Equal to Parent Tag

Hello,

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"&gt;
<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

A: 

Try setting the heights to inherit:

height: inherit;
Tim  2010-04-29 15:32:30
Hello Tim,The Div Tag can not show full when I change the height = inherit;Thanks / PD
Phong Dang  2010-04-30 11:03:21

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?