Comment faire en sorte que <div> remplisse la hauteur de <td> ?

Question

J'ai consulté plusieurs messages sur StackOverflow, mais je n'ai pas trouvé de réponse à cette question plutôt simple.

J'ai une construction HTML comme celle-ci :

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

Ce dont j'ai besoin, c'est que le div pour remplir la hauteur du td afin de pouvoir positionner l'arrière-plan de la div (l'icône) dans le coin inférieur droit de la page d'accueil. td .

Comment suggérez-vous que je m'y prenne ?

Answer 1

Si vous donnez à votre TD une hauteur de 1px, alors la div enfant aura un parent de hauteur pour calculer son %. Parce que votre contenu serait plus grand que 1px, le td s'agrandirait automatiquement, tout comme le div. C'est un peu comme un hack, mais je parie que ça fonctionnerait.

Answer 2

CSS height: 100% ne fonctionne que si le parent de l'élément a une hauteur explicitement définie. Par exemple, cela fonctionnerait comme prévu :

td {
    height: 200px;
}

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

Puisqu'il semble que votre <td> sera de hauteur variable, que se passerait-il si vous ajoutiez l'icône en bas à droite avec une image positionnée de manière absolue, comme suit :

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

Avec le marquage de la cellule du tableau comme suit :

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

Edit : utilisation de jQuery pour définir la hauteur de la div

Si vous conservez le <div> en tant qu'enfant de la <td> Cet extrait de jQuery permet de définir correctement la hauteur de l'image :

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

Answer 3

Vous pouvez essayer de faire flotter votre div :

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Vous pouvez également utiliser inline-block :

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Exemple de travail de la méthode inline-block :

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>

Answer 4

Il faut vraiment le faire avec JS. Voici une solution. Je n'ai pas utilisé vos noms de classe, mais j'ai appelé la div à l'intérieur de la td nom de classe "full-height" :-) J'ai utilisé jQuery, évidemment. Notez que cela a été appelé à partir de jQuery(document).ready(function(){ setFullHeights();}) ; Notez également que si vous avez des images, vous devrez d'abord les itérer avec quelque chose comme :

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

}

Vous devriez plutôt appeler la fonction loadedFullHeights() à partir de docReady. C'est d'ailleurs ce que j'ai fini par utiliser, juste au cas où. Il faut savoir anticiper !

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');
}

}

Answer 5

Cette question a déjà reçu une réponse aquí . Il suffit de mettre height: 100% dans les deux div et le conteneur td .