Make div height 100% in a table cell

Question

How can I make div inside a cell table 100% height when the row is stretched by word wrapping in another cell.

In this Fiddle I want to have the div in the second cell to fill the whole cell (100% of height).

td {
  border: 1px solid red;
  width: 50%;
  background-color: yellow;
}
td div {
  background-color: green;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<table>
  <tr>
    <td>
      <div>
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
      </div>
    </td>
    <td>
      <div>
        xxx
      </div>
    </td>
  </tr>
</table>

Adam Buchanan Smith · Answer 1 · 2016-07-06T23:39:12.873

6

edit

As mentioned in the comments below, my first approach display: inline-block did not work in firefox.

As progysm mentioned, using tr, td{height: 100%} works well on all browsers, see fiddle http://jsfiddle.net/3v4wz030/61/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    margin: 0;
    padding:0;
}
 tr, td { height: 100%; }

Code below here does not work in firefox, I failed on my first attempt

Just add display: inline-block see fiddle http://jsfiddle.net/3v4wz030/39/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    display:inline-block;
    margin: 0;
    padding:0;
}

edited Jul 06 '16 at 23:39

answered Jul 06 '16 at 22:50

Adam Buchanan Smith

9,422
5
19
39

in my browser (firefox), I need to put tr, td { height: 100%; } with the td div { height: 100%; } no inline-block required. – progysm Jul 06 '16 at 23:15
2

`tr, td { height: 100%; }` actually doesn't work for me (not event the fiddle - tried Chrome and IE11). `inline-block` works but @Pangloss answer (position tricks) works better for my case because it fills the whole cell even when the cell has some padding. – Martin Volek Jul 07 '16 at 08:40

Stickers · Accepted Answer · 2017-11-18T16:08:48.357

6

If you only need the background color to cover the entire cell, you can just set it on the td rather than div.

td:last-child {
  background-color: green;
}

If you really need to make the div to cover the cell, you can try using the position tricks. Note, this approach only works when there is less data in the second cell.

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

jsFiddle

edited Nov 18 '17 at 16:08

answered Jul 07 '16 at 01:20

Stickers

75,527
23
147
186

Works like a charm, thanks! – suigeneris Jan 19 '17 at 20:19
4

really bad solution. if absolute div will be bigger then table cell - content will fall out http://jsfiddle.net/9p58gLhg/ – godblessstrawberry Nov 09 '17 at 11:05
@godblessstrawberry - you could use overflow:auto; to fix that issue. – Desolator Mar 04 '19 at 07:56
@SolidSnake for which element and how that suppose to help? – godblessstrawberry Mar 04 '19 at 08:00
@godblessstrawberry - put it on div, and it'll be scrollable content if it exceeds the width/height. – Desolator Mar 04 '19 at 08:04
here's what I did:
no need for left and top properties.
– Desolator Mar 04 '19 at 08:07

Make div height 100% in a table cell

2 Answers2