web-dev-qa-db-fra.com

IE affichage: l'enfant de cellule de tableau ignore la hauteur: 100%

J'ai besoin de construire dynamiquement une table pour contenir certaines données.
J'ai suivi l'approche habituelle d'utilisation des divs avec display: table, display: table-row et display: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}
<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Ou vue sur Jsfiddle.

Dans la plupart des navigateurs, j'obtiens la sortie attendue:

Sample image

Cependant, dans IE8 (et éventuellement dans les versions ultérieures, je n'ai pas testé les versions ultérieures), j'obtiens ce qui suit:

Sample image 2

Le height: 100% défini sur le div entourant "Contenu" est ignoré.

Selon CanIUse , IE8 devrait offrir une prise en charge complète des propriétés d'affichage associées.

J'ai parcouru un certain nombre de questions similaires sur SO sans trouver de solution de travail: la plupart des solutions reposent sur Javascript (que je cherche à éviter), utilisez une hauteur fixe (ibid précédent ) ou ne fonctionnent pas sur IE8.

cssinternet-explorercss-tables
19
Nit

Malheureusement, l'effet des valeurs de pourcentage pour height sur display: table-row et display: table-cell les éléments ne sont pas définis selon le spec :

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

Ainsi, même si un navigateur peut prétendre offrir une prise en charge complète de la disposition des tableaux, certains aspects tels que les hauteurs en pourcentage peuvent ne pas être implémentés de manière cohérente dans tous les navigateurs car il n'y a pas de comportement correct. Vous pourriez essayer de soulever un problème sur Microsoft Connect dans l'espoir qu'ils changeront le comportement pour être interopérable, mais en attendant, vous devrez trouver un autre solution (et même dans ce cas, vous ne pouvez pas garantir que le comportement restera interopérable, même dans d'autres navigateurs).

Pour aggraver les choses, je viens de tester et cela affecte toutes les versions de IE jusqu'à et y compris 11, ce qui signifie qu'un hack spécifique à IE échouera ici. Si vous besoin d'utiliser une disposition de table CSS, comme en témoigne le fait que vous devez prendre en charge IE8, alors une solution de contournement CSS pure n'est probablement pas réalisable.

20
BoltClock

Pour Internet Explorer 8-10 table-cells avec height: 100%; doit être enveloppé par table-row avec height: 100%;.

HTML pour IE devrait être comme:

table > table-row > table-cell

Alors que les autres navigateurs fonctionneront correctement avec

table > table-row
or
table > table-cell

[edit] J'ai revu la question, et j'ai remarqué que vous voulez définir 100% de hauteur non pas aux cellules du tableau, mais sur le contenu à l'intérieur.

solution 1 : Donc, pour Internet Explorer, la hauteur de contenu est liée à l'élément le plus proche avec une hauteur définie en unités absolues, comme les pixels, les em, si vous voulez utilisez% height, vous devrez peut-être également définir 100% height sur tous les éléments parents, ce sera html et body. exemple de travail

solution 2 : Ajoutez simplement

.content {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.elem {
    overflow: hidden;
}

Dans ce cas, vous n'avez pas besoin de définir la hauteur sur l'un des éléments parents. exemple de travail .

J'espère que cela t'aides.

6
Dariusz Sikorski