Perché l'altezza percentuale non funziona con il display: table-cell?

Sto provando a centrare sia orizzontalmente che verticalmente un div all'interno di un div esterno. Funziona quando il div esterno ha larghezza e altezza specifico fissato in pixel comePerché l'altezza percentuale non funziona con il display: table-cell?

#countdownBox { 
    width: 700px; 
    height: 500px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

ma non riesce quando l'altezza e la larghezza sono percentuali come

#countdownBox { 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

Perché è questo e v'è un lavoro intorno?

EDIT Ecco l'HTML con container CSS:

#countdownBoxContainer { 
width: 100%; 
height: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
z-index: 3; 
} 

<div id="countdownBoxContainer"> 
    <div id="countdownBox"> 
     <div> 
     hi there 
     </div> 
    </div> 
</div>

fonte

2012-01-04 zakdances

Che aspetto ha l'HTML? Le larghezze e le altezze percentuali (di solito) non funzioneranno a meno che l'elemento contenitore non abbia una dimensione impostata. – HackedByChinese

aggiunto HTML. Il contenitore ha le stesse dimensioni del suo genitore. – zakdances

Sulla base del fatto che si dispone di larghezza e l'altezza del 100% dichiarato ho intenzione di assumere che non ti aspetti a chiunque di devo scorrere qui. See this Fiddle dove ho una soluzione di lavoro basata su quei parametri.

ricordare che display: table-cell; agisce esattamente come <td> elementi e non renderanno in modo corretto a meno che siano in un <table> (o un contenitore che è display: table;).

L'altro problema è che <html> e <body> non sono necessariamente l'altezza dello schermo se il contenuto è molto piccolo. html, body { height: 100%; } risolve questo problema ma è un po 'hacky.

fonte

2012-01-04 02:50:43

Funziona, grazie. Tuttavia, per mantenere una posizione assoluta sugli elementi, ho dovuto aggiungere ancora un altro involucro esterno contenente il display: tabella div. Ciò significa che ora ho 3 livelli di div per centrare un elemento ... sembra dannatamente goffo. – zakdances

Perché hai bisogno che il container sia posizionato in modo assoluto? –

Perché deve sovrapporsi ad altre div. – zakdances

Perché l'altezza percentuale non funziona con il display: table-cell?

risposta

Problemi correlati