Set Height of Div Equal to Parent Tag
- by Phong Dang
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">
<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
