CSS - Perluas tinggi anak DIV float ke tinggi orang tua

Saya memiliki struktur halaman sebagai:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Sekarang, child-leftDIV akan memiliki lebih banyak konten, sehingga parenttinggi DIV bertambah sesuai dengan DIV anak.

Namun masalahnya adalah child-rightketinggian tidak bertambah. Bagaimana saya bisa membuat ketinggiannya sama dengan orang tuanya?

Untuk parentelemen, tambahkan properti berikut:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

maka untuk .child-rightini:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Temukan hasil yang lebih rinci dengan contoh CSS di sini dan informasi lebih lanjut tentang kolom dengan ketinggian yang sama di sini .

Solusi umum untuk masalah ini menggunakan penentuan posisi absolut atau float yang dipangkas, tetapi ini rumit karena membutuhkan penyetelan yang luas jika kolom Anda berubah dalam jumlah + ukuran, dan Anda perlu memastikan kolom "utama" Anda selalu yang terpanjang. Sebaliknya, saya sarankan Anda menggunakan salah satu dari tiga solusi yang lebih kuat:

1. display: flex: sejauh ini solusi paling sederhana & terbaik dan sangat fleksibel - tetapi tidak didukung oleh IE9 dan yang lebih lama.
2. tableatau display: table: sangat sederhana, sangat kompatibel (hampir semua browser yang pernah ada), cukup fleksibel.
3. display: inline-block; width:50% dengan hack margin negatif: cukup sederhana, tetapi batas kolom-bawah sedikit rumit.

1. display:flex

Ini sangat sederhana, dan mudah untuk beradaptasi dengan tata letak yang lebih kompleks atau lebih detail - tetapi flexbox hanya didukung oleh IE10 atau yang lebih baru (di samping browser modern lainnya).

Contoh: http://output.jsbin.com/hetunujuma/1

Html yang relevan:

<div class="parent"><div>column 1</div><div>column 2</div></div>

Css yang relevan:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox memiliki dukungan untuk lebih banyak opsi, tetapi untuk memiliki jumlah kolom di atas sudah cukup!

2. <table>ataudisplay: table

Cara sederhana & sangat kompatibel untuk melakukan ini adalah dengan menggunakan table- Saya sarankan Anda mencobanya terlebih dahulu jika Anda memerlukan dukungan IE lama . Anda sedang berhadapan dengan kolom; divs + float bukan cara terbaik untuk melakukan itu (belum lagi fakta bahwa beberapa level div bersarang hanya untuk meretas batasan css hampir tidak lebih "semantik" daripada hanya menggunakan tabel sederhana). Jika Anda tidak ingin menggunakan tableelemen, pertimbangkan cssdisplay: table (tidak didukung oleh IE7 dan yang lebih lama).

Contoh: http://jsfiddle.net/emn13/7FFp3/

Html yang relevan: (tetapi pertimbangkan menggunakan plain<table>)

<div class="parent"><div>column 1</div><div>column 2</div></div>

Css yang relevan:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Pendekatan ini jauh lebih kuat daripada menggunakan overflow:hiddendengan mengapung. Anda dapat menambahkan cukup banyak jumlah kolom; Anda dapat memilikinya skala otomatis jika Anda inginkan; dan Anda mempertahankan kompatibilitas dengan browser kuno. Berbeda dengan solusi float, Anda juga tidak perlu tahu sebelumnya kolom mana yang paling panjang; timbangan tinggi baik-baik saja.

KISS: jangan gunakan float hacks kecuali Anda perlu melakukannya. Jika IE7 merupakan masalah, saya masih akan memilih tabel sederhana dengan kolom semantik di atas solusi trik-CSS yang sulit dirawat dan kurang fleksibel setiap hari.

Omong-omong, jika Anda membutuhkan tata letak agar responsif (mis. Tidak ada kolom pada ponsel kecil), Anda dapat menggunakan @mediakueri untuk kembali ke tata letak blok polos untuk lebar layar kecil - ini berfungsi baik jika Anda menggunakan <table>atau display: tableelemen lainnya .

3. display:inline blockdengan hack margin negatif.

Alternatif lain adalah menggunakan display:inline block.

Contoh: http://jsbin.com/ovuqes/2/edit

Html yang relevan: (tidak adanya spasi di antaradivtag adalah signifikan!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Css yang relevan:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Ini sedikit rumit, dan margin negatif berarti bagian bawah kolom "true" dikaburkan. Ini pada gilirannya berarti Anda tidak dapat memposisikan apa pun relatif ke bagian bawah kolom itu karena itu terpotong oleh overflow: hidden. Perhatikan bahwa selain blok inline, Anda dapat mencapai efek yang serupa dengan float.

TL; DR : gunakan flexbox jika Anda dapat mengabaikan IE9 dan yang lebih lama; kalau tidak coba tabel (css). Jika tak satu pun dari opsi itu bekerja untuk Anda, ada peretasan margin negatif, tetapi ini dapat menyebabkan masalah tampilan aneh yang mudah terlewatkan selama pengembangan, dan ada batasan tata letak yang perlu Anda perhatikan.

Untuk orang tua:

display: flex;

Untuk anak-anak:

align-items: stretch;

Anda harus menambahkan beberapa awalan, periksa caniuse.

Saya menemukan banyak jawaban, tetapi mungkin solusi terbaik bagi saya adalah

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Anda dapat memeriksa solusi lain di sini http://css-tricks.com/fluid-width-equal-height-columns/

Silakan atur div induk untuk overflow: hidden
kemudian di div anak Anda dapat mengatur jumlah besar untuk padding-bottom. misalnya
padding-bottom: 5000px
dulu margin-bottom: -5000px
dan kemudian semua div anak akan menjadi ketinggian orang tua.
Tentu saja ini tidak akan berfungsi jika Anda mencoba untuk menempatkan konten di div induk (di luar div lain yang ada)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Contoh: http://jsfiddle.net/Tareqdhk/DAFEC/

Apakah orang tua memiliki ketinggian? Jika Anda mengatur ketinggian orang tua seperti itu.

div.parent { height: 300px };

Maka Anda dapat membuat anak meregang hingga ketinggian penuh seperti ini.

div.child-right { height: 100% };

EDIT

Inilah cara Anda melakukannya menggunakan JavaScript.

Tampilan tabel CSS sangat ideal untuk ini:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Jawaban asli (diasumsikan kolom mana pun bisa lebih tinggi):

Anda mencoba membuat tinggi orangtua bergantung pada tinggi anak-anak dan tinggi anak-anak bergantung pada tinggi orangtua. Tidak akan menghitung Kolom CSS Faux adalah solusi terbaik. Ada lebih dari satu cara untuk melakukan itu. Saya lebih suka tidak menggunakan JavaScript.

Saya baru-baru ini melakukan ini di situs web saya menggunakan jQuery. Kode menghitung ketinggian div tertinggi dan mengatur div lainnya ke ketinggian yang sama. Inilah tekniknya:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Saya tidak percaya height:100%akan berhasil, jadi jika Anda tidak secara eksplisit mengetahui ketinggian div, saya tidak berpikir ada solusi CSS murni.

Saya menggunakan ini untuk bagian komentar:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Anda dapat mengapung hak anak ke kanan, tetapi dalam kasus ini saya telah menghitung lebar setiap div secara tepat.

Jika Anda mengetahui bootstrap, Anda dapat melakukannya dengan mudah dengan menggunakan properti 'flex'. Yang perlu Anda lakukan adalah melewatkan properti css di bawah ini ke div induk

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

dimana .homepageSectiondiv orang tua saya. Sekarang tambahkan div anak di html Anda sebagai

<div class="abc col-md-6">
<div class="abc col-md-6">

di mana abc adalah div anak saya. Anda dapat memeriksa kesetaraan ketinggian di kedua anak div terlepas dari perbatasan hanya dengan memberikan perbatasan ke div anak

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Saya menggunakan gaya inline hanya untuk memberikan ide.

Saya belajar trik yang rapi ini dalam wawancara magang. Pertanyaan aslinya adalah bagaimana Anda memastikan ketinggian setiap komponen teratas dalam tiga kolom memiliki ketinggian yang sama yang menunjukkan semua konten yang tersedia. Pada dasarnya membuat komponen anak yang tidak terlihat yang membuat ketinggian maksimum yang mungkin.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>