Note that there are some explanatory texts on larger screens.

plurals
  1. POSet Height of Div Equal to Parent Tag
    primarykey
    data
    text
    <p>I have a snip code HTML as below :</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr"&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt; &lt;meta name="GENERATOR" content="Microsoft SharePoint" /&gt; &lt;meta name="progid" content="SharePoint.WebPartPage.Document" /&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta http-equiv="Expires" content="0" /&gt; &lt;title&gt;Demo &lt;/title&gt; &lt;style type="text/css"&gt; A { font-weight: normal; font-size: 10pt; text-decoration: none; } &lt;/style&gt; &lt;link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=AWRyZDbGxZSekWBubaxPXw%3D%3D" /&gt; &lt;link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=w9FW7ASZnUjiWWCtJEcnTw%3D%3D" /&gt; &lt;/head&gt; &lt;body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height:100%;"&gt; &lt;form method="" name="frm"&gt; &lt;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%"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td style="border-top: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;span&gt; &lt;nobr&gt;8:00 AM&lt;/nobr&gt; &lt;/span&gt; &lt;/td&gt; &lt;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%"&gt; &lt;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"&gt; &lt;a style="height: 100%; color: black" href="#"&gt;&lt;font color="white"&gt;Item &lt;/font&gt;&lt;/a&gt; &lt;/div&gt; &lt;/td&gt; &lt;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"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;/td&gt; &lt;td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;span&gt; &lt;nobr&gt;9:00 AM&lt;/nobr&gt; &lt;/span&gt; &lt;/td&gt; &lt;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%"&gt; &lt;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"&gt; &lt;a style="height: 100%; color: black" title="" href="#"&gt;&lt;font color="white"&gt;Item 2 &lt;/font&gt; &lt;/a&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr style="border-left: medium none; border-right: #696969 1px solid"&gt; &lt;td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;span&gt; &lt;nobr&gt;10:00 AM&lt;/nobr&gt; &lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;span&gt; &lt;nobr&gt;11:00 AM&lt;/nobr&gt; &lt;/span&gt; &lt;/td&gt; &lt;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"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"&gt; &lt;/td&gt; &lt;td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="2"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I set the height of the div 100% so that it full of TD but it did not effect.</p> <p>Please help me !</p> <p>Thanks / PD</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload