Как сделать

fill height

Вы можете попробовать сделать свой div float:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

В качестве альтернативы, используйте inline-block:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Рабочий пример метода inline-block:

 table, th, td {border: 1px solid black; } 

 
 
 
 
 Я хочу, чтобы ячейка была на всю высоту 
 < / td> 
 Эта ячейка 
 выше 
, чем 
 первая 
 
 
 

CSS height: 100% работает, только если родительский элемент имеет явно определенную высоту. Например, это будет работать так, как ожидалось:

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

Поскольку кажется, что ваш будет переменной высоты, что, если вы добавите нижний правый значок с абсолютно позиционированным изображением, например:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

С разметкой ячеек таблицы следующим образом:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

Изменить: использование jQuery для установки высоты div

Если вы сохраните

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});