Comment faire <div> fill <td> hauteur

Cette question de répondre à des besoins de mise à jour, depuis que les navigateurs ont changé

Question d'origine

J'ai regardé à travers plusieurs postes sur StackOverflow, mais n'ont pas été en mesure de trouver une réponse à cette simple question.

J'ai un HTML comme ceci:

<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 que j'ai besoin est pour la div pour remplir la hauteur de la td, afin que je puisse être en mesure de position de la div à l'arrière-plan (l'icône) dans le coin inférieur droit de la td.

Comment me conseillez-vous aller à ce sujet?

InformationsquelleAutor CodeMonkey | 2010-08-22
  1. 146

    Si vous donnez à votre TD une hauteur de 1px, alors l'enfant div aurait du pic du parent pour calculer le % de. Parce que votre contenu devrait être de plus de 1px, le td automatiquement croître, tout comme la div. Un peu une poubelle hack, mais je parie qu'il serait de travailler.

    • Alors qu'il semble bien fonctionner dans webkit, IE9 complètement les pauses.
    • Le travail pour moi dans IE11 que lorsque j'ai également mis div inline-block. Merci!
    • Cela ne semble pas fonctionner dans Firefox 45
    • Voici une solution qui fonctionne dans Firefox: stackoverflow.com/questions/36575846/...
    • Pour le faire fonctionner dans Firefox ainsi que dans google Chrome, j'ai eu à utiliser min-height: 1px; au lieu de height: 1px;
    InformationsquelleAutor psayre23
  2. 31

    CSS height: 100% ne fonctionne que si l'élément parent a expressément une hauteur. Par exemple, ce serait comme prévu:

    td {
    height: 200px;
}

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

    Car il semble être votre <td> va être à hauteur variable, que si vous avez ajouté en bas à droite de l'icône avec une position absolue de l'image 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 la cellule du tableau de balisage 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: à l'aide de jQuery pour définir div hauteur

    Si vous gardez le <div> comme un enfant de la <td>, cet extrait de jQuery va bien définir 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());
});
    • Qui pourrait fonctionner. Permettez-moi de revenir vers vous quand je l'ai essayé. J'ai lu sur le sujet et ont compris que <div> besoin d'une hauteur spécifiée pour être en mesure à l'échelle 100%. De ce que j'ai lu qu'il était possible de faire avec jQuery, mais, depuis, il peut le calculer pour moi.
    • Oui, c'est exactement ça. Pour le <div>hauteur: 100% de travail, la <td> (qui est le <div>s parent) doit avoir une hauteur spécifiée. Et vous avez également le droit de jQuery serait-il le faire assez facilement pour vous - voir mes mises à jour par exemple.
    • Je n'ai pas vraiment tout ce que le bien, et nous avons décidé sur une approche différente. Mais je vais accepter votre réponse car c'est le meilleur autour.
    • Ah, si seulement j'avais un dollar pour le nombre de fois CSS m'a fait changer d'approche 🙂
    • Suis-je le seul qui pense que "CSS height: 100% ne fonctionne que si l'élément parent a expressément une hauteur" est vraiment stupide règle? Le navigateur détermine l'élément parent de la hauteur de toute façon; il n'y a aucun moyen vous doit avoir à définir explicitement le parent de l'élément de hauteur.
    • croyez-moi, vous n'êtes pas le seul.
    • position: relative sur un <td> est buggé dans Firefox.
    • bon j'ai mis à jour ma réponse à cette adresse.
    • le jquery solution a fonctionné mais seulement quand je l'ai mis à la fin du fichier, merci
    • Le jQuery est la meilleure solution pour tous les navigateurs et la simplicité.

    InformationsquelleAutor Pat
  3. 5

    Vous pouvez essayer de faire votre div float:

    .thatSetsABackgroundWithAnIcon{

    float:left;
}

    Alternativelly, utiliser inline-block:

    .thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

    Exemple de travail de l'inline-block méthode:

    CSS:

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

    HTML:

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

    • display:inline-block; fonctionne très bien ! Merci pour l'astuce !
    • Le float:left suggestion ne semble pas fonctionner. Cette réponse pourrait être améliorée en l'enlevant, depuis la seconde solution mentionnée semble fonctionner.
    • Il n'est pas avec Firefox. Il semble qu'à travailler avec google Chrome.
    • Ce morceau de code ne fonctionne pas sur Chrome, du moins, de nos jours (je suis en utilisant 63.0.3239.84).
    InformationsquelleAutor angryobject
  4. 2

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

    • ne semble pas fonctionner dans Chrome
    • ne fonctionne pas sous chrome
    InformationsquelleAutor Nacho Coloma
  5. -1

    Vraiment avoir à faire avec JS. Voici une solution. Je n'ai pas utiliser vos noms de classe, mais j'ai appelé la div à l'intérieur de la td class nom de "pleine hauteur" 🙂 Utilisé jQuery, évidemment. Notez que c'était appelée à partir de jQuery(document).ready(function(){ setFullHeights();});
    Notez également que si vous avez des images, vous allez avoir à parcourir dans un premier temps par 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()
    }
});

    }

    Et vous souhaitez appeler le loadedFullHeights() à partir de docReady à la place. C'est effectivement ce que j'ai fini par utiliser juste au cas où. Arrivés à penser à l'avenir, vous le savez!

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

    }

    InformationsquelleAutor GoodNews
  6. -3

    Modifier l'image de fond de la <td> lui-même.

    Ou appliquer un peu de css de la div:

    .thatSetsABackgroundWithAnIcon{
    height:100%;
}
    • comme je l'écris dans le code. La TD a déjà un background-image à l'aide d'une classe. Si cette option n'est pas viable. J'ai essayé de réglage de la hauteur de la div à 100%, mais cela ne fonctionne pas. Simplement, il est renvoyé à la hauteur variable du contenu <dl>. Donc, quelque chose qui est nécessaire pour rendre la div "comprendre" qu'il doit remplir la hauteur. Et height: 100% ne le fait pas. (pas le seul atleast)
    InformationsquelleAutor Jage