Cómo hacer que <div> complete <td> altura

Revisé varias publicaciones en StackOverflow, pero no he podido encontrar una respuesta a esta pregunta bastante simple.

Tengo una construcción HTML como esta:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

Lo que necesito es divque llene la altura del td, para poder colocar el fondo del div (el icono) en la esquina inferior derecha del td.

¿Cómo sugieres que haga eso?

Si le da a su TD una altura de 1px, entonces el div hijo tendría un padre alto para calcular su%. Debido a que su contenido sería más grande que 1px, el td crecería automáticamente, al igual que el div. Un poco como un truco de basura, pero apuesto a que funcionaría.

Altura CSS: 100% solo funciona si el elemento principal del elemento tiene una altura definida explícitamente. Por ejemplo, esto funcionaría como se esperaba:

td {
    height: 200px;
}

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

Como parece que su <td>altura será variable, ¿qué pasa si agrega el ícono de la parte inferior derecha con una imagen absolutamente posicionada así:

.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;
}

Con el marcado de celda de tabla así:

<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>

Editar: usando jQuery para establecer la altura de div

Si mantiene <div>como hijo de <td>, este fragmento de jQuery establecerá correctamente su altura:

// 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());
});

Podrías intentar hacer que tu div flote:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternativamente, use bloque en línea:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Ejemplo de trabajo del método de bloques en línea:

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

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

Realmente tengo que hacer esto con JS. He aquí una solución. No usé sus nombres de clase, pero llamé al div dentro del nombre de clase td de "full-height" :-) Usé jQuery, obviamente. Tenga en cuenta que esto fue llamado desde jQuery (documento) .ready (function () {setFullHeights ();}); También tenga en cuenta que si tiene imágenes, primero tendrá que recorrerlas con algo como:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

Y en su lugar, querrá llamar aloadedFullHeights () desde docReady. Esto es en realidad lo que terminé usando por si acaso. ¡Tienes que pensar en el futuro, sabes!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

Esta pregunta ya está respondida aquí . Simplemente coloque height: 100%el divy el recipiente td.

Modifique la imagen de fondo del <td> en sí.

O aplique un poco de CSS al div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}