CSS kapsayıcı div yüksekliği almıyor

116

Konteynır div'imin çocuk boyunun maksimum yüksekliğini almasını istiyorum. çocuğun hangi boyda olacağını bilmeden div. JSFiddle üzerinde deniyordum . Konteyner divkırmızı yanıyor. ki görünmüyor. Neden?

css css-float liquid-layout

— Neel Basu
kaynak

282

Aşağıdaki mülkü ekleyin:

.c{
    ...
    overflow: hidden;
}

Bu, kabı, yüzen öğelerden bağımsız olarak, içindeki tüm öğelerin yüksekliğine saygı duymaya zorlar.
http://jsfiddle.net/gtdfY/3/

GÜNCELLEME

Son zamanlarda, bu numarayı gerektiren, ancak taşmanın gösterilmesine izin vermem gereken bir proje üzerinde çalışıyordum, bunun yerine, kayan öğelerinizi temizlemek için bir sözde öğe kullanabilirsiniz, tüm öğeler üzerinde taşmaya izin verirken aynı etkiyi etkili bir şekilde elde edebilirsiniz.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— Nightfirecat
kaynak

8

Temel olarak, bu özelliğin eklenmesi, dış kutuyu yüzen kapların sahip olduğu kuralı yok saymaya zorlar, burada kaplar için yükseklik olarak hesaplanmaz ve bunları tam arka plan çizimi için uygular.

— Nightfirecat

4

Vay canına, "Ne? Bu işe yaramaz" dedim. Ama lanetleneceğim. Tamamen düzgün davranmayacağını düşündüm. Teşekkürler

— fie

1

Bu gerçekten de oldukça karmaşık değil mi? Bana göre, taşma amacını ortadan kaldırıyor. Bunun neden doğru ve en çok oy alan cevap olduğunu anlamıyorum.

— Andrew Weir

3

@AndrewWeir İtiraf edeceğim, şimdiye kadar, boyutlarındaki yüzer sayıları doğru bir şekilde değerlendirmek için bu kapsayıcıları genişletme yönteminin neden işe yaradığından tam olarak emin değildim. Göre göre birkaç kaynaklardan , görünür taşma izin dan, onun oluşturma modunu değiştirmek için bir öğe neden olduğunu görünüyor değil bunu yaparken, ve bunu yaparken, bu kuvvetleri unsurları bu taşma izin vermeyecek şekilde.

— Nightfirecat

2

Taşma kullanmanın ilk yolu benim için çalışıyor. İkinci yol AYRICA işe yarıyor ve gelecekte taşma ihtimalim olması durumunda daha az riskli görünüyor. Keşke iki kez ek oy verebilseydim.

— Tyler Collier

28

Çocukları yüzdürüyorsunuz, yani konteynerin önünde "yüzüyorlar". Doğru yüksekliği almak için şamandırayı "temizlemelisiniz"

Div stili = "clear: both" kayan öğeyi temizler ve kaba doğru yüksekliği verir. Float'lar hakkında daha fazla bilgi için http://css.maxdesign.com.au/floatutorial/clear.htm adresine bakın .

Örneğin.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— Yoeri
kaynak

Bu açık: her ikisi de; sorun, yüzen çocuklar olduğundan, konteynerin yüksekliği için uygun bir çözüm gibi görünüyor. Dolayısıyla bu yaklaşım, taşmaktan daha iyi görünüyor: gizli; yukarıda bir.

— Ronnie Depp

Bu basit çözümü paylaştığınız için teşekkürler @ Yoeri. Yaşasın! Tasarım tarafından ziyade sadece PHP geliştirme perspektifine odaklandıktan sonra bir web mizanpajı tasarladığımdan bu yana yaklaşık 6 yıl geçtiği için yeni tasarımım için aynı çözümü arıyorum.

— Ronnie Depp

20

O kadar kolay değil mi?

.c {
    overflow: auto;
}

— Antonio Romero Oca
kaynak

Evet öyle: D. Teşekkürler

— Alauddin Ahmed

4

Bu takas divini sondan önce eklemeyi deneyin </div>

<div style="clear: both; line-height: 0;"> </div>

— rüzgâraltı
kaynak

3

En iyi ve en kurşun geçirmez çözüm eklemektir ::beforeve ::afterkaba pseudoelements. Örneğin, aşağıdaki gibi bir listeniz varsa:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

Listedeki her öğenin float:leftözelliği vardır, o zaman css'nize eklemelisiniz:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Ya da display:inline-block;özelliği deneyebilirsiniz , sonra herhangi bir düzeltme eklemeniz gerekmez.

— Agata
kaynak