Comment puis-je faire un div remplir une cellule de table entière?

Je suis en train de remplir le centre de la cellule d'un tableau avec un élément div. Pour les fins d'illustrer le problème, la div est de style avec un fond rouge. Il semble que cela fonctionne dans Chrome, mais pas IE. Dans le violon, ci-dessous, c'est à dire est le réglage de la hauteur de la div pour la hauteur minimale nécessaire pour contenir son contenu. En bricoler avec ce problème avec une autre feuille de style CSS paramètres, j'ai réussi à obtenir c'est à dire pour interpréter "height: 100%;" "la hauteur de la fenêtre du navigateur". Toutefois, comme la question des états, que je veux, c'est à dire l'interpréter comme la hauteur de la td cellule. Des idées?

http://jsfiddle.net/UBk79/

CSS:

*{
    padding: 0px;
    margin: 0px;
}
html, body{
    height: 100%;
}
#container{
    height:100%;
    width: 100%;
    border-collapse:collapse;
}
#centerCell{
    border: 1px solid black;
}
#main{
    height: 100%;
    background-color: red;
}

HTML:

<table id="container">
  <tr id="topRow" height="1px">
    <td id="headerCell" colspan="3">
      TOP
    </td>
  </tr>
  <tr id="middleRow">
    <td id="leftCell" width="1px">
      LEFT
    </td>
    <td id="centerCell">
      <div id="main">CENTER</div>
    </td>
    <td id="rightCell" width="1px">
      RIGHT
    </td>
  </tr>
  <tr id="bottomRow" height="1px">
    <td id="footerCell" colspan="3">
      BOTTOM
    </td>
  </tr>
</table>

source d'informationauteur Craig

1

avez-vous essayé de changer de css:
```
#centerCell{
    border: 1px solid black;
    height:100%;
}
```
semble fonctionner pour moi sur le bord, firefox et chrome
20

J'ai fait un peu plus de recherche sur ce et a recueilli quelques informations qui pourraient être utiles à d'autres cherchent à résoudre des problèmes similaires. Le CSS dit trois choses qui me semblent importantes:

Tout d'abord, re: la définition de la hauteur d'un div) en pourcentage:

Le pourcentage est calculé par rapport à la hauteur de la boîte du bloc contenant. Si la hauteur du bloc contenant n'est pas explicitement spécifié (c'est à dire, cela dépend du contenu de la hauteur), et cet élément n'est pas en position absolue, la valeur calcule à "auto".

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

... une hauteur de "auto" ne seront pas remplir la cellule, sauf si le contenu est plus grand que la cellule de hauteur minimum. Mais si nous essayons de définir explicitement la hauteur de l'contenant des cellules ou de la ligne, puis nous courons dans le problème suivant:

CSS 2.1 ne définit pas la façon dont la hauteur des cellules de tableau et de lignes de la table est calculé lorsque leur hauteur est spécifiée à l'aide des valeurs en pourcentage.

http://www.w3.org/TR/CSS21/tables.html#height-layout

Depuis la spécification ne définit pas, je suppose que ce n'est pas trop surprenant que Chrome et IE choisir de calculer différemment.

Sinon, (xec indirectement souligné) en essayant d'utiliser le positionnement relatif a la spécification suivante problème:

L'effet d'une "position:relative" sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table, colonne, table-cell, et de la table-caption éléments n'est pas défini.

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Donc j'en ai conclu il n'y a probablement pas un pur CSS façon de résoudre le problème que l'on peut raisonnablement s'attendre à travailler sur la plupart des navigateurs.

Au début, j'ai pensé: "Wow, CSS est assez bancal et incomplète pour laisser ce genre de choses indéfini." Comme je l'ai pensé plus, pourtant, j'ai réalisé que la définition de la spécification de ces questions serait beaucoup plus compliqué qu'il n'y paraît au premier abord. Après tout, la ligne/cellule hauteurs sont calculées en fonction de la hauteur de leur contenu, et je veux faire de la hauteur de mon contenu en fonction de la ligne/hauteur de la cellule. Même si j'ai bien défini, la terminaison de l'algorithme pour la façon dont je veux qu'il fonctionne dans mon cas précis, il n'est pas clair que l'algorithme peut facilement généraliser à tous les autres cas que la spec aurait besoin pour couvrir sans entrer dans une boucle infinie.
2

Bien que j'ai aimé de Craig répondre et de ne pas utiliser l'approche de cette réponse moi-même, j'ai eu assez loin avec cette jsFiddle.

Il s'appuie sur un hack, cependant: Réglage height: 1px sur la table. Il fonctionne dans Chrome, FF, IE11 et Edge (tout ce que j'ai testé), mais Chrome commence à virer dans les cas limites. Voir la tripoter. Voici les bits intéressants:
```
table {
    width: 100%;
    /* Whý does this make it work? */
    height: 1px;
}

td {
    border: 10px solid blue;
    height: 100%;
}

#container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 10px solid black;
}
```
Trop de hack-odeur pour moi.

Voici un jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/

CSS height: 100% ne fonctionne que si l'élément parent a expressément une hauteur. Cette jQuery met la table hauteur de la cellule de la première colonne.

<script type="text/javascript">
    $(function(){
    $('.myTable2 tr').each(function(){
    var H1 = $(this).height(); //Get the row height
    $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
    });
});
</script>

-1

Il suffit de régler la hauteur de la ligne de la div; tant que son écran est toujours un élément de niveau bloc. Il n'est pas nécessaire de relative ou absolue de positionnement ou de codage en dur de la hauteur de la div niveau ou l'un de ses parents. Fonctionne dans internet explorer 8+, Firefox et Chrome.

Exemple:
```
line-height: 50px;
//or
line-height: 2em;
```

Vous devez vous connecter pour publier un commentaire.