Dlaczego wysokość procentowa nie działa z wyświetlaniem: komórka tabeli?

Próbuję wyśrodkować poziomo i pionowo div wewnątrz zewnętrznego div. To działa, gdy zewnętrzna div ma określoną szerokość i wysokość ustawione w pikselach jakDlaczego wysokość procentowa nie działa z wyświetlaniem: komórka tabeli?

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

ale nie wtedy, gdy wysokość i szerokość są procenty jak

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

Dlaczego to jest i jest tam pracę wokół?

EDIT Oto HTML z kontenera 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>

Źródło

2012-01-04 zakdances

Jak wygląda HTML? Procentowe szerokości i wysokości (zwykle) nie będą działać, jeśli element zawierający nie ma ustawionego wymiaru. – HackedByChinese

dodano HTML. Kontener jest tego samego rozmiaru, co jego rodzic. – zakdances

Opierając się na fakcie, że masz szerokość i wysokość 100% deklarowanej mam zamiar założyć, że nie jesteś oczekując nikogo trzeba przewijać tutaj. See this Fiddle gdzie mam działające rozwiązanie oparte na tych parametrach.

Pamiętaj, że display: table-cell; działa dokładnie tak jak <td> elementów i nie będą działały prawidłowo, chyba że jesteś w <table> (lub pojemniku, który jest display: table;).

Innym problemem jest to, że <html> i <body> niekoniecznie są wysokością ekranu, jeśli zawartość jest bardzo mała. html, body { height: 100%; } naprawia to, ale jest trochę hacky.

Źródło

2012-01-04 02:50:43

To działa, dziękuję. Jednak, aby zachować absolutną pozycję elementów, musiałem dodać kolejną zewnętrzną powłokę zawierającą wyświetlacz: div tabeli. Oznacza to, że mam teraz 3 warstwy elementów div, aby wycentrować element ... wydaje się cholernie niezdarny. – zakdances

Dlaczego potrzebny jest absolutnie? –

Ponieważ musi pokrywać się z innymi elementami div. – zakdances

Dlaczego wysokość procentowa nie działa z wyświetlaniem: komórka tabeli?

Odpowiedz

Powiązane problemy