it-swarm-id.com

CSS container div tidak mendapatkan tinggi

Saya ingin div kontainer saya mendapatkan ketinggian maksimal anak-anaknya. tanpa mengetahui ketinggian apa yang akan dimiliki divs anak. Saya mencoba --- JSFiddle . Wadah div berwarna merah. yang tidak muncul. Mengapa?

113
Neel Basu

Tambahkan properti berikut:

.c{
    ...
    overflow: hidden;
}

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

MEMPERBARUI

Baru-baru ini, saya sedang mengerjakan sebuah proyek yang membutuhkan trik ini, tetapi diperlukan untuk memungkinkan overflow untuk ditampilkan, jadi alih-alih, Anda dapat menggunakan pseudo-element untuk menghapus float Anda, secara efektif mencapai efek yang sama sambil memungkinkan overflow pada semua elemen.

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

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

277
Nightfirecat

Anda melayang anak-anak yang berarti mereka "mengambang" di depan wadah. Untuk mendapatkan ketinggian yang benar, Anda harus "membersihkan" pelampung

Gaya div = "jelas: keduanya" membersihkan mengambang dan memberikan ketinggian yang tepat ke wadah. lihat http://css.maxdesign.com.au/floatutorial/clear.htm untuk info lebih lanjut tentang kendaraan hias.

misalnya.

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

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

Bukankah itu lebih mudah?

.c {
    overflow: auto;
}
19

Coba masukkan div kliring ini sebelum </div> terakhir

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

4
lee

Solusi terbaik dan paling anti peluru adalah menambahkan ::before dan ::after pseudoelements 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 properti float:left, maka Anda harus menambahkan ke css Anda:

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

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

2
Agata