Display IE: il figlio della cella di tabella ignora l’altezza: 100%

Ho bisogno di creare dynamicmente una tabella per contenere alcuni dati.
Ho seguito il solito approccio all’uso di div con display: table , display: table-row e 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; } 
 
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

Oppure guarda su Jsfiddle.

Nella maggior parte dei browser ottengo l’output atteso:

Immagine di esempio

Tuttavia, in IE8 (e possibilmente nelle versioni successive, non ho provato le versioni successive), ottengo il seguente:

Immagine di esempio 2

L’ height: 100% impostato sul div che circonda “Contenuto” viene ignorato.

Secondo CanIUse , IE8 dovrebbe offrire pieno supporto per le relative proprietà di visualizzazione.

Ho esaminato una serie di domande simili su SO senza trovare una soluzione funzionante: la maggior parte delle soluzioni si basa su Javascript (che sto cercando di evitare), usa un’altezza fissa (precedente) o non funziona su IE8.

Sfortunatamente, l’effetto dei valori percentuali per l’ height sul display: table-row e display: table-cell elementi display: table-cell non sono definiti in base alle specifiche :

Il CSS 2.1 non definisce come viene calcasting l’altezza delle celle della tabella e delle righe della tabella quando viene specificata la loro altezza utilizzando i valori percentuali.

Pertanto, mentre un browser può pretendere di offrire pieno supporto per il layout della tabella, alcuni aspetti come le altezze percentuali potrebbero non essere coerentemente implementati su tutti i browser perché non esiste un comportamento corretto. Potresti provare a sollevare un problema su Microsoft Connect nella speranza che cambieranno il comportamento per renderlo interoperabile, ma nel frattempo dovrai trovare una soluzione alternativa (e anche in questo caso non puoi garantire che il comportamento rimanga interoperabile, anche in altri browser).

A peggiorare le cose, ho appena testato e questo ha effetto su tutte le versioni di IE fino a 11 incluso, il che significa che un attacco di IE non sarà più disponibile qui. Se è necessario utilizzare un layout di tabella CSS, come evidenziato dal fatto che è necessario supportare IE8, una soluzione CSS pura probabilmente non è fattibile.

Per Internet Explorer 8-10 table-cells con height: 100%; devono essere avvolti da table-row di table-row con height: 100%; .

Html for IE dovrebbe essere come:

 table > table-row > table-cell 

Mentre altri browser funzioneranno correttamente con

 table > table-row or table > table-cell 

[modifica] Ho esaminato di nuovo la domanda e ho notato che si desidera impostare l’altezza del 100% non sulle celle della tabella, ma sul contenuto al suo interno.

soluzione 1 : quindi per Internet Explorer l’altezza del contenuto è correlata all’elemento più vicino con l’altezza impostata in unità assolute, come i pixel, gli em, se vuoi usare% height, potresti anche aver bisogno di impostare l’altezza del 100% su tutti gli elementi genitore, questo sarà html e corpo. esempio di lavoro

soluzione 2 : aggiungere semplicemente

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

Non è necessario impostare l’altezza su Qualsiasi degli elementi padre in questo caso. esempio di lavoro

Spero che questo ti aiuti.