How to make a div fill an entire cell of a table?

Question

I am trying to populate the center cell of a table with a div element. In order to illustrate the problem, the div is framed in red. It seems to work in Chrome, but not in IE. In the script below, IE sets the height of the div to the minimum height necessary to contain its contents. Carried away with this problem with various CSS settings, I managed to get IE to interpret "height: 100%"; like "browser window height". However, as the question says, I want IE to interpret it as the height of the td cell. Any ideas?

http://jsfiddle.net/UBk79/

CSS

*{ padding: 0px; margin: 0px; } html, body{ height: 100%; } #container{ height:100%; width: 100%; border-collapse:collapse; } #centerCell{ border: 1px solid black; } #main{ height: 100%; background-color: red; } 

HTML:

 <table id="container"> <tr id="topRow" height="1px"> <td id="headerCell" colspan="3"> TOP </td> </tr> <tr id="middleRow"> <td id="leftCell" width="1px"> LEFT </td> <td id="centerCell"> <div id="main">CENTER</div> </td> <td id="rightCell" width="1px"> RIGHT </td> </tr> <tr id="bottomRow" height="1px"> <td id="footerCell" colspan="3"> BOTTOM </td> </tr> </table> 

Answer 1

I did some more research on this and gathered some information that may be useful to others who are trying to solve such problems. The CSS spec says the following three things that I think are important:

Firstly, re: indicating the height (div) as a percentage:

The percentage is calculated relative to the height of the generated block containing the block. If the height of the containing block is not explicitly specified (i.e., Depends on the height of the content), and this element is not absolutely positioned, the value is calculated as "auto".

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

... the height "auto" will not fill the cell unless the contents are greater than the minimum cell height. But if we try to explicitly set the height of the contained cell or row, then we will encounter the following problem:

CSS 2.1 does not determine how the height of table cells and table rows is calculated when their height is specified using percentage values.

http://www.w3.org/TR/CSS21/tables.html#height-layout

Since the specification does not define it, I think it is not surprising that Chrome and IE prefer to calculate it differently.

Alternatively (as an indirect indication of xec), an attempt to use relative positioning has the following problem specification:

The "position: relative" effect for table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell and table Recording elements are undefined.

www.w3.org/TR/CSS21/visuren.html#propdef-position

So, I concluded , probably not a clean CSS method to solve the problem that you can reasonably expect to work in most browsers.

At first I thought, “Wow, the CSS spec is pretty crappy and incomplete to leave all these things undefined.” However, when I thought about it more, I realized that defining a specification for these problems would be much more complicated than it seems at first glance. In the end, row / cell heights are calculated as a function of the height of their contents, and I want the height of my content to be a function of the row / cell height. Despite the fact that I have a well-defined, final algorithm for how I want it to work in my particular case, it is not clear that the algorithm will easily generalize to all other cases that the specification will have to cover without getting into infinite loops .

Answer 2

Just set the table cell to: position:relative and div for:

 position:absolute; top:0; left:0; width:100%; height:100%; 

Edit 2017: DEMO BELOW: (note how you don't see red td)

 #expandingDiv { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: yellow; } 

 <table style="width: 120px"> <tr> <td style="background: blue">blue&nbsp;td</td> <td style="background: green">green&nbsp;td</td> </tr> <tr> <td style="background: red; position: relative"> <div id='expandingDiv'> yellow div </div> </td> <td style="background: orange"> Some longer text which makes the bottom two tds expand dynamically. </td> </tr> </table> 

Answer 3

Although I liked Craig's answer and I will not use this approach in this answer, I'm pretty far with this jsFiddle .

However, it relies on hacks: setting height: 1px in the table. It works in Chrome, FF, IE11, and Edge (everything I tested), but Chrome starts to work erroneously in extreme cases. Watch the violin. Here are some interesting bits:

 table { width: 100%; /* Whý does this make it work? */ height: 1px; } td { border: 10px solid blue; height: 100%; } #container { width: calc(100% - 20px); height: calc(100% - 20px); border: 10px solid black; } 

Too much bad smell.

Answer 4

Here's jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/

CSS Height: 100% only works if the parent of the element has an explicitly defined height. This jQuery sets the height of the table cell in the first column.

 <script type="text/javascript"> $(function(){ $('.myTable2 tr').each(function(){ var H1 = $(this).height(); // Get the row height $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height }); }); </script> 

Answer 5

Just set the height of the line div; while its display is still a block level element. There is no need for relative or absolute positioning or hard coding of height at the level of div or any of its parents. Works in IE 8+, Firefox and Chrome.

Example:

 line-height: 50px; // or line-height: 2em;