How can I make a div take up 100% of the height of a html table cell that doesn't have a fixed TD height?

Question

I have a html table and inside a cell i have a div

<td>
      <div class=content>some content</div>
</td>
<td>
      <div class=content>some content<br/>some content<br/>some content<br/></div>
</td>

some of the content in certain cells are multiple lines and the div has a background color so I want the view to be uniform so I want the divs with less content to still be the same height to cover the full td.

I tried doing

.content
{
    height:100%;
}

but that doesn't seem to change anything.

Has [been](http://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell) [asked](http://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height) [several](http://stackoverflow.com/questions/18010768/make-a-div-fill-its-parent-td-height-without-specifying-height-on-td) [times](http://stackoverflow.com/questions/19684509/how-do-i-make-a-div-fill-an-entire-table-cell), however no pure CSS solution exists. — Hashem Qolami, Oct 11 '14 at 13:52
@Mr_Green - right now I have a border around the div (not the TD) so that would look funny but I agree I can my css around and use this as a solution — leora, Oct 11 '14 at 14:11
@leora apply background to td and use box-shadow inset to make look like border inside the td. — Mr_Green, Oct 11 '14 at 14:13

score 1 · Answer 1 · answered Oct 11 '14 at 13:51

1

Height is the dynamic property, it applies according to contents. Hence you can't set it in percent. But if parent height is fixed then child can have height attribute in percent. Here, set some static height of td so you can use div height in percent.

answered Oct 11 '14 at 13:51

Laxmikant Dange

7,606
6
40
65

the issue is that the height of the TD changes dynamically based on hiding and showing some content in between so I want to avoid having a hard coded height of the TD. I basically want the div to be 100% of the TD height no matter what the current height is . . is that possible? – leora Oct 11 '14 at 13:53

score 1 · Accepted Answer · answered Oct 11 '14 at 14:19

Instead of applying background to the content div, apply to the td cell itself.

td {
    background-color: cornflowerblue;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    padding: 5px;
}

I also applied inset box-shadow which is alternate for applying border inside an element (In this case, the cell) as you had mentioned in the comments that your content div has a border too.

Working Fiddle

score 0 · Answer 3 · answered Oct 11 '14 at 13:51

may be the problem is that you did not use Quotes with your class attribute

here is my code

<table>
  <tr>
    <td>
      <div >some content</div>
</td>
<td>
      <div>some content<br/>some content<br/>some content<br/></div>
</td>
  </tr>
</table>

check out here JSBIN hope it help

How can I make a div take up 100% of the height of a html table cell that doesn't have a fixed TD height?

3 Answers3