Div penampung CSS tidak mendapatkan tinggi

116

Saya ingin div kontainer saya mendapatkan tinggi maksimal dari tinggi anak-anaknya. tanpa mengetahui tinggi badan apa divyang akan dimiliki anak tersebut. Saya mencoba JSFiddle . Wadahnya divberwarna merah. yang tidak muncul. Mengapa?

css css-float liquid-layout Neel Basu
sumber

Jawaban:

282

Tambahkan properti berikut:

.c{
    ...
    overflow: hidden;
}

Ini akan memaksa wadah untuk menghormati ketinggian semua elemen di dalamnya, terlepas dari elemen mengambang.
http://jsfiddle.net/gtdfY/3/

MEMPERBARUI

Baru-baru ini, saya sedang mengerjakan sebuah proyek yang membutuhkan trik ini, tetapi perlu memungkinkan overflow untuk ditampilkan, jadi sebagai gantinya, Anda dapat menggunakan elemen semu untuk membersihkan float Anda, secara efektif mencapai efek yang sama sambil membiarkan overflow pada semua elemen.

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

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

Nightfirecat
sumber
8
Pada dasarnya, menambahkan properti ini memaksa kotak luar untuk mengabaikan aturan yang dimiliki wadah terapung, di mana mereka tidak dihitung tingginya untuk wadah, dan menerapkannya untuk gambar latar belakang penuh.
Nightfirecat
4
Wow, saya seperti, "Apa? Itu tidak akan berhasil." Tapi aku akan terkutuk. Saya benar-benar berpikir itu tidak akan berperilaku baik. Terima kasih
fie
1
Bukankah ini benar-benar hacky? Bagi saya, itu mengalahkan tujuan melimpah. Saya tidak mengerti mengapa ini adalah jawaban yang benar dan paling disukai.
Andrew Weir
3
@AndrewWeir Saya akui, sampai sekarang, saya belum sepenuhnya yakin mengapa metode perluasan wadah ini untuk mempertimbangkan pelampung dalam ukurannya dengan benar berhasil. Menurut ke beberapa sumber , tampaknya bahwa ini menyebabkan unsur untuk mengubah mode rendering, dari memungkinkan meluap terlihat tidak melakukannya, dan dengan berbuat demikian, pasukan elemen ini untuk melarang melimpah itu.
Nightfirecat
2
Cara pertama, menggunakan overflow, bekerja untuk saya. Cara kedua JUGA bekerja dan tampaknya tidak terlalu berisiko jika saya mengalami overflow di masa mendatang. Saya hanya berharap saya bisa memberi suara positif dua kali.
Tyler Collier
28

Anda mengapung anak-anak yang artinya mereka "mengapung" di depan wadah. Untuk mengambil ketinggian yang benar, Anda harus "membersihkan" pelampung

The div style = "clear: both" membersihkan mengambang dan memberikan ketinggian yang benar ke wadah. lihat http://css.maxdesign.com.au/floatutorial/clear.htm untuk info lebih lanjut tentang float.

misalnya.

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

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
Yoeri
sumber
Ini jelas: keduanya; Hal tampaknya menjadi solusi yang tepat untuk ketinggian wadah, karena masalahnya adalah anak-anak mengambang. Jadi pendekatan ini tampaknya lebih baik daripada overflow: hidden; satu di atas.
Ronnie Depp
Terima kasih @Yoeri telah membagikan solusi sederhana ini. Jempol! Saya sedang mencari solusi yang sama untuk desain baru saya karena sudah hampir 6 tahun sejak terakhir kali saya merancang tata letak web setelah saya hanya fokus pada perspektif pengembangan PHP daripada sisi desain.
Ronnie Depp
20

Bukankah itu lebih mudah?

.c {
    overflow: auto;
}
Antonio Romero Oca
sumber
Ya itu dia: D. Terima kasih
Alauddin Ahmed
4

Coba masukkan div kliring ini sebelum yang terakhir </div>

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

lee
sumber
3

Solusi terbaik dan paling antipeluru adalah menambahkan ::beforedan ::afterpseudoelements ke wadah. Jadi jika Anda memiliki misalnya daftar seperti:

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

Dan setiap elemen dalam daftar memiliki float:leftproperti, maka Anda harus menambahkan css Anda:

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

Atau Anda dapat mencoba display:inline-block;properti, maka Anda tidak perlu menambahkan perbaikan apa pun.

Agata
sumber