web-dev-qa-db-fra.com

Comment faire pour que <div> remplisse <td> height

La réponse à cette question nécessite une mise à jour, car les navigateurs ont changé

Question originale

J'ai parcouru plusieurs articles 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 div remplisse la hauteur de td afin de pouvoir positionner l'arrière-plan de la div (l'icône) dans le coin inférieur droit de la td.

Comment suggérez-vous que j'y aille?

htmlcsshtml-table
87
CodeMonkey

Si vous donnez à votre TD une hauteur de 1px, le div de l'enfant aura un parent surélevé pour calculer son%. Comme votre contenu serait supérieur à 1px, le td augmenterait automatiquement, comme Un peu comme une poubelle, mais je parie que ça marcherait.

148
psayre23

Hauteur CSS: 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%;
}

Comme il semble que votre <td> va avoir une hauteur variable, et si vous ajoutiez l’icône en bas à droite avec une image positionnée de manière absolue, comme ceci:

.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 balisage de la cellule de la table comme ceci:

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

Édition: utiliser jQuery pour définir la hauteur de div

Si vous gardez le <div> en tant qu'enfant du <td>, cet extrait de jQuery définira correctement sa hauteur:

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

Vous pouvez essayer de faire flotter votre div:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternativement, utilisez 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>
5
angryobject

Cette question est déjà répondu ici . Il suffit de mettre height: 100% dans div et dans le conteneur td.

2
Nacho Coloma