Yüzde yüksekliği neden ekranla çalışmaz: tablo hücresi?

Hem yatay hem de dikey olarak bir dış div içinde bir div merkezlemeye çalışıyorum. Dış div belirli genişlik ve yükseklikYüzde yüksekliği neden ekranla çalışmaz: tablo hücresi?

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

gibi piksel olarak belirledi zaman çalışır ancak yükseklik ve genişlik

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

gibi yüzdeler olduğunda o niye bu başarısız olur ve bir çalışma etrafında var mı?

DÜZENLEME İşte konteyner CSS ile HTML şudur: genişlik ve% 100 yüksekliğini sana kimseyi beklemiyordum olduğunuzu kabul edeceğim ilan sahip olduğu gerçeğine dayanarak

#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>

kaynak

2012-01-04 zakdances

HTML neye benziyor? İçindeki öğe ayarlanmış bir boyuta sahip olmadıkça yüzdelik genişlikler ve yükseklikler (genellikle) çalışmaz. – HackedByChinese

HTML ekledi. Kap, ebeveyni ile aynı boyuttadır. – zakdances

buraya kaydırmak zorunda. See this Fiddle Burada bu parametrelere dayanan bir çalışma çözümüm var.

tam <td> elemanları gibi o display: table-cell; eylemleri unutmayın ve onlar <table> ( display: table; veya bir kap) içinde olmadıkça düzgün hale olmayacaktır.

diğer sorun içeriği çok küçükse <html> ve <body> mutlaka ekranın yüksekliği değil olmasıdır. html, body { height: 100%; } bunu düzeltir ancak biraz bulanık.

kaynak

2012-01-04 02:50:43

Bu işler, teşekkür ederim. Ancak, elemanların üzerinde mutlak bir pozisyonu korumak için, ekranı içeren bir başka dış sarmalayıcı eklemem gerekiyordu: tablo div. Bu demek oluyor ki, şimdi bir elementi ortalamak için 3 tane div katmanım var ... lanet olası görünüyor. – zakdances

Kesinlikle yerleştirilmeniz için konteynere ihtiyacınız var mı? –

Diğer div'ların üst üste gelmesi gerekiyor. – zakdances

Yüzde yüksekliği neden ekranla çalışmaz: tablo hücresi?

cevap

İlgili konular