Faire un DIV remplir une cellule de tableau entière

J’ai vu cette question et j’ai googlé un peu , mais rien n’a fonctionné jusqu’à présent. Je pense que c’est maintenant en 2010 (ces questions / réponses sont anciennes et, bien, sans réponse) et nous avons CSS3! Est-il possible d’obtenir un div pour remplir la largeur et la hauteur d’une cellule entière en utilisant CSS?

Je ne sais pas quelle sera la largeur et / ou la hauteur de la cellule à l’avance, et le réglage de la largeur et de la hauteur du div à 100% ne fonctionne pas.

En outre, la raison pour laquelle j’ai besoin de la div est que je dois positionner absolument certains éléments en dehors de la cellule, et position: relative ne s’applique pas à td s, 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):

 
testtest
test of really long content that causes the height of the cell to increase dynamically
test

Vous avez dit dans votre question initiale que le réglage de la width et de la height à 100% ne fonctionnait pas, ce qui me laisse penser qu’il existe une autre règle qui l’emporte. Avez-vous vérifié le style calculé dans Chrome ou Firebug pour voir si les règles de largeur / hauteur étaient réellement appliquées?

modifier

Comme je suis fou! Le div était en taille au texte, pas au td . Vous pouvez corriger cela sur Chrome en rendant l’ display:inline-block div display:inline-block , mais cela ne fonctionne pas sur IE. Cela s’avère plus compliqué …

div height = 100% dans la cellule du tableau ne fonctionnera que lorsque la table a un atsortingbut de hauteur lui-même.

 
cell1cell2
long text long text long text long text long text long text

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

Je devais définir une fausse hauteur à

et hauteur: hériter pour

s

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

Ensuite, définissez la height: inherit td height: inherit

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

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

 
Something big with multi lines and makes table bigger
full-height div

Si la raison pour laquelle vous voulez qu’un div à 100% soit placé dans une cellule de tableau soit qu’une couleur d’arrière-plan puisse s’étendre sur toute la hauteur tout en ayant un espacement entre les cellules, vous pouvez donner à la

Utilisez la propriété d’espacement de bordure CSS pour créer la marge entre les cellules.

Si vous avez vraiment besoin d’un div 100%, alors, comme d’autres l’ont mentionné, vous devez soit atsortingbuer une hauteur fixe à

soit utiliser Javascript.

Étant donné que tous les autres navigateurs (y compris IE 7, 8 et 9) traitent correctement la position:relative sur une cellule de la table et que seul Firefox fait erreur, le mieux est d’utiliser un shim JavaScript. Vous ne devriez pas avoir à modifier votre DOM pour un navigateur en échec. Les gens utilisent les shims tout le temps quand IE a quelque chose de mal et que tous les autres navigateurs le font correctement.

Voici un extrait avec tout le code annoté. Le code JavaScript, HTML et CSS utilisent des pratiques de conception Web réactives dans mon exemple, mais vous n’avez pas à 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 de code contient également de nombreux commentaires à la fois en CSS et en Javascript.)

 $(function() { // FireFox Shim if ($.browser.mozilla) { $('#test').wrapInner('
'); 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(); } });

Après plusieurs jours de recherche, j’ai trouvé un correctif possible pour ce problème.

      Documento sin título    
whatever whatever whatever
whatever dynamic height


more content
whatever
Content inside DIV TAG

Langue espagnole: El truco es établecer la Tabla, el TR y el TD une hauteur: 100%. Esto lo hace compatible avec FireFox y Chrome. Internet Explorer Ignore eso, pour que la vie se passe bien TD como block. Esta forma Explorer sí toma la altura máxima.

Explication en anglais: dans les commentaires du code

Je propose une solution en utilisant le expérimental Flexbox pour simuler une disposition de table qui permettra à l’élément de contenu d’une cellule de remplir verticalement sa cellule parente:

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

Ok personne n’a mentionné cela alors j’ai pensé que je posterais cette astuce:

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

overflow: auto sur ce conteneur div dans la cellule fait le tour pour moi. Sans elle, le div n’utilise pas toute la hauteur.

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

Mais je ne suis pas sûr que vous ayez besoin de le faire pour résoudre votre problème de positionnement des éléments dans

dehors de la cellule. Pour cela, vous pourriez faire quelque chose comme ceci:

 
hello world

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

Pour faire de la hauteur: 100% fonctionnent pour le div interne, vous devez définir une hauteur pour le parent td. Pour mon cas particulier, cela a fonctionné en utilisant la hauteur: 100%. Cela a fait s’étendre la hauteur intérieure div, 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 que la cellule de la table ait une hauteur fixe pour ne pas grossir en fonction du contenu (pour faire défiler le div interne ou masquer le débordement), c’est quand vous n’avez pas d’autre choix que de faire quelques astuces js. Le parent td devra avoir la hauteur spécifiée dans une unité non relative (pas de%). Et vous n’aurez probablement pas d’autre choix que de calculer cette hauteur en utilisant js. Cela nécessiterait également la table-layout: jeu de style fixe pour l’élément de table

Je rencontre fréquemment des problèmes similaires et je me sers toujours de la table-layout: fixed; sur l’élément de table et la 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, sauf pour l’utilisation de jQuery. Alors voici ce que j’ai trouvé.
Il prend même en compte rowspan.

 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 des tableaux nesteds.

si

ont tous la height: 100%; set, alors le div remplira la hauteur de cellule dynamic dans tous les navigateurs.

Je ne regarde pas ici un vieux truc CSS pour < div > dans < td >. Je rappelle donc que simple définit une valeur minimale pour la largeur , mais que vous avez besoin de min-width . Par exemple:

 

La largeur du td , dans ce cas, vous appartient.

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

Content for New Div Tag Goes Here

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

 

Essaye ça:

  

Essayez de mettre l’affichage: bloc de table à l’intérieur d’une cellule

Ceci est ma solution pour étendre 100% de hauteur et 100% de largeur en html

Si vous supprimez la première ligne de votre code, vous pouvez la corriger …

  

parce que ce type de document ne permet pas dans certains fichiers d’utiliser 100% dans

, mais si vous supprimez cette ligne, le corps échoue à étendre l’arrière-plan à 100% de hauteur et 100% de largeur. le problème

  

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