Faire un DIV remplir une cellule entière du tableau

J'ai vu cette question et j'ai un peu cherché sur Google , mais rien n'a fonctionné jusqu'à présent. Je suppose que nous sommes en 2010 maintenant (ces questions / réponses sont anciennes et, enfin, sans réponse) et nous avons CSS3! Existe-t-il un moyen d'obtenir un div pour remplir la largeur et la hauteur d'une cellule de tableau entière en utilisant CSS?

Je ne sais pas quelle sera la largeur et / ou la hauteur de la cellule à l'avance, et définir la largeur et la hauteur du div à 100% ne fonctionne pas.

De plus, la raison pour laquelle j'ai besoin du div est que je dois absolument positionner certains éléments en dehors de la cellule, et position: relativene s'applique pas à tds, donc j'ai besoin d'un div wrapper.

Le code suivant fonctionne sur IE 8, le mode de compatibilité IE 7 d'IE 8 et Chrome (non testé ailleurs):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

Vous avez dit dans votre question initiale que la mise widthet heightà 100%ne marchait pas, mais, ce qui me fait soupçonner qu'il ya une autre règle primordiale il. Avez-vous vérifié le style calculé dans Chrome ou Firebug pour voir si les règles de largeur / hauteur étaient vraiment appliquées?

Éditer

Que je suis stupide! Le divdimensionnait pour le texte, pas pour le td. Vous pouvez résoudre ce problème sur Chrome en créant le div display:inline-block, mais cela ne fonctionne pas sur IE. Cela s'avère plus délicat ...

div height = 100% dans la cellule du tableau ne fonctionnera que lorsque le tableau a lui-même l'attribut height.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

UPD dans FireFox, vous devez également définir la height=100%valeur de l' TDélément parent

J'ai dû définir une fausse hauteur à la <tr>hauteur et: hériter pour<td>s

tr a height: 1px(c'est ignoré de toute façon)

Puis définissez le td height: inherit

Ensuite, réglez le div sur height: 100%

Cela a fonctionné pour moi dans IE Edge et Chrome:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Si votre raison de vouloir un div à 100% dans une cellule de tableau était de pouvoir avoir une couleur d'arrière-plan s'étendant sur toute la hauteur tout en étant capable d'avoir un espacement entre les cellules, vous pouvez lui donner la <td>couleur d'arrière-plan et utiliser le CSS propriété border-spacing pour créer la marge entre les cellules.

Si vous avez vraiment besoin d'un div de hauteur de 100%, cependant, comme d'autres l'ont mentionné ici, vous devez soit attribuer une hauteur fixe au, <table>soit utiliser Javascript.

Donc, parce que tout le monde publie sa solution et qu'aucune n'était bonne pour moi, voici la mienne (testée sur Chrome & Firefox).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Violon: https://jsfiddle.net/nh6g5fzv/

Étant donné que tous les autres navigateurs (y compris IE 7, 8 et 9) gèrent position:relativecorrectement une cellule de tableau et que seul Firefox se trompe, le mieux est d'utiliser un shim JavaScript. Vous ne devriez pas avoir à modifier votre DOM pour un navigateur défaillant. Les gens utilisent des cales tout le temps lorsque IE se trompe et que tous les autres navigateurs le font correctement.

Voici un extrait de code avec tout le code annoté. Le JavaScript, le HTML et le CSS utilisent des pratiques de conception Web réactive dans mon exemple, mais vous n'êtes pas obligé de le faire si vous ne le souhaitez pas. (Responsive signifie qu'il s'adapte à la largeur de votre navigateur.)

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Voici le code lui-même, mais cela n'a pas de sens sans le contexte, alors visitez l'URL jsfiddle ci-dessus. (L'extrait complet contient également de nombreux commentaires dans le CSS et le Javascript.)

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Je propose une solution utilisant l'expérimental Flexbox pour simuler une mise en page de tableau qui permettra à l'élément de contenu d'une cellule de remplir sa cellule parent verticalement:

Démo

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

après plusieurs jours de recherche, j'ai trouvé une solution possible à ce problème.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

Langue espagnole: El truco es Establecer la Tabla, el TR y el TD a hauteur: 100%. Esto lo hace compatible avec FireFox et Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.

Explication en anglais: dans les commentaires du code

si <table> <tr> <td> <div>tout est height: 100%;défini, le div remplira la hauteur de cellule dynamique dans tous les navigateurs.

Ok personne n'a mentionné cela, alors j'ai pensé que je publierais cette astuce:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

overflow: auto sur ce conteneur div dans la cellule fait l'affaire pour moi. Sans cela, le div n'utilise pas toute la hauteur.

Si la cellule du tableau est de la taille souhaitée, ajoutez simplement cette classe css et affectez-la à votre div:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Si vous souhaitez que la cellule du tableau remplisse également le parent, affectez également la classe à la cellule du tableau. J'espère que cela aide.

un peu tard à la fête mais voici ma solution:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Parce que je n'ai pas assez de réputation pour publier un commentaire, je souhaite ajouter une solution cross-browser complète qui combine les approches de @Madeorsk et @ Saadat avec quelques légères modifications! (Testé sur Chrome, Firefox, Safari, IE et Edge à partir du 10/02/2020)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

Cependant, si vous êtes comme moi, vous souhaitez également contrôler l'alignement vertical, et dans ces cas, j'aime utiliser flexbox:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Je pense que la meilleure solution serait d'utiliser JavaScript.

Mais je ne suis pas sûr que vous deviez faire cela pour résoudre votre problème de positionnement des éléments à l' <td>extérieur de la cellule. Pour cela, vous pouvez faire quelque chose comme ceci:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Pas en ligne bien sûr, mais avec des classes et des identifiants.

Pour que la hauteur fonctionne à 100% pour le div intérieur, vous devez définir une hauteur pour le td parent. Pour mon cas particulier, cela fonctionnait en utilisant la hauteur: 100%. Cela étirait la hauteur de la div intérieure, tandis que les autres éléments de la table ne permettaient pas au td de devenir trop grand. Vous pouvez bien sûr utiliser d'autres valeurs que 100%

Si vous souhaitez également faire en sorte que la cellule du tableau ait une hauteur fixe afin qu'elle ne s'agrandisse pas en fonction du contenu (pour faire défiler la div interne ou masquer le débordement), c'est lorsque vous n'avez pas d'autre choix que de faire quelques astuces js. Le td parent devra avoir la hauteur spécifiée dans une unité non relative (pas en%). Et vous n'aurez probablement pas d'autre choix que de calculer cette hauteur en utilisant js. Cela aurait également besoin de la mise en page du tableau: jeu de style fixe pour l'élément de tableau

Je rencontre fréquemment des problèmes similaires et je les utilise toujours uniquement table-layout: fixed;sur l' tableélément et height: 100%;sur la div interne.

Je n'ai finalement rien trouvé qui fonctionnerait sur tous mes navigateurs et tous les modes de rendu DocTypes / navigateur, à l'exception de l'utilisation de jQuery. Alors, voici ce que j'ai trouvé.
Il prend même en compte le nombre de lignes.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

Testé dans IE11 (mode Edge), FF42, Chrome44 +. Non testé avec les tables imbriquées.

vous pouvez le faire comme ça:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Si l'élément positionné et son élément père n'ont pas de largeur et de hauteur, définissez

padding: 0;

dans son élément père,

Ce n'est probablement pas recommandé.

J'ai trouvé une solution de contournement qui fonctionne si votre div ne contient pas de texte et a un arrière-plan uniforme.

display: 'list-item'

donne au div la hauteur et la largeur souhaitées, mais avec le gros inconvénient d'avoir une puce d'élément de liste. Comme le div a une couleur de fond homogène, je me suis débarrassé de la puce avec ces styles:

list-style-position: 'inside',
color: *background-color*,

Je ne suis pas sûr de ce que vous voulez faire mais vous pouvez essayer celui-ci:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Ce qui suit devrait fonctionner. Vous devez définir une hauteur pour la cellule parent. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Essaye ça:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Essayez de mettre display: table block dans une cellule

Je ne regarde pas ici une vieille astuce CSS pour < div > dans < td >. Par conséquent, je rappelle: définissez simplement une valeur minimale pour la largeur , mais ce dont vous avez besoin pour la largeur min . Par exemple:

<div style="width: 3px; min-width: 99%;">

La largeur du td , dans ce cas, dépend de vous.

Ceci est ma solution pour étendre la hauteur de 100% et la largeur de 100% dans un html <td>

si vous supprimez la première ligne de votre code, vous pouvez le réparer ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

car ce doctype ne permet pas dans certains fichiers d'utiliser 100% pour cent à l'intérieur de <td>, mais si vous supprimez cette ligne, le corps ne parvient pas à étendre l'arrière-plan à 100% de hauteur et 100% de largeur, j'ai donc trouvé cela DOCTYPEqui résout le problème

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

ce DOCTYPE vous permet d'étendre l'arrière-plan de votre corps à 100% de hauteur et 100% de largeur, et vous permet de prendre toute la hauteur de 100% et la largeur de 100% dans le <td>