CSS - Perluas tinggi anak DIV float ke tinggi orang tua


451

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?


Jawaban:


459

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 .


14
CSS Anda menghasilkan perilaku yang tidak terdefinisi - tinggi orang tua tergantung pada tinggi anak-anak, tetapi anak-anak memiliki persentase tinggi yang ditentukan dalam hal orang tua: ini tidak valid, dan kemungkinan tidak akan bekerja dengan cara lintas browser.
Eamon Nerbonne

1
Saya melihat Anda tidak melayang semuanya - jadi itu didefinisikan dengan biaya tidak penskalaan jika kolom kanan tumbuh lebih lama dari kiri (yang memang tidak terjadi dalam pertanyaan OP).
Eamon Nerbonne

4
Ya, Anda perlu menambahkan ini: padding-bottom: 32768px; margin-bottom: -32768px; kepada anak-anak.
Michael

3
Ini berfungsi selama kolom kanan dijamin memiliki lebih sedikit konten daripada kiri atau yang lain itu akan terpotong. Saya juga mengedit jawaban untuk menghilangkan deklarasi yang tidak berguna.
Christoph

3
@MatthewBlackford: ini "retas" karena mencegah margin runtuh. Anda dapat mencegah keruntuhan margin dengan cara lain, seperti menggunakan batas transparan 1px, tetapi pada intinya, tetapi yang penting di sini adalah Anda menghindari keruntuhan margin. Saya tidak akan menggunakan solusi ini kecuali sebagai pilihan terakhir karena menyebabkan kesalahan tata letak yang aneh dan pemotongan yang tidak terduga (atau konten yang dilapiskan) ketika asumsi Anda ternyata salah. Singkatnya: Anda tidak ingin melakukan ini kecuali Anda benar - benar perlu.
Eamon Nerbonne

205

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.


1
Bagus, tetapi perlu dicatat bahwa Anda tidak dapat menggunakan margin di antara sel-sel ini (dan bantalan tidak akan membantu jika Anda menginginkannya ditata).
Wordpressor

3
border-spacing:10px;pada elemen tabel akan memperkenalkan spasi seperti margin. Atau, Anda bisa menambahkan kolom (kosong) ekstra di mana Anda ingin ruang tambahan. Dan Anda juga bisa menambahkan padding di dalam sel tabel; padding itu akan disertakan di latar belakang, sehingga mungkin bukan yang Anda inginkan. Tetapi Anda benar bahwa itu tidak sefleksibel margin normal. Dan Anda tidak dapat memposisikan apa pun relatif terhadap kolom, yang mungkin menjadi masalah.
Eamon Nerbonne

1
Jadi lebih baik tata letak tabel-kurang atau tidak?
dinamis

3
Saya harus mengatakan: Saya setuju kepada Anda bahwa dalam hal ini tabel sederhana lebih dari cukup. Masalahnya adalah bahwa ada pandangan umum untuk mengabaikan setiap tata letak dengan tabel
dinamis

3
Masalah dengan tabel adalah bahwa ketika layar diubah ukurannya menjadi lebar yang lebih kecil (desain responsif) sel-sel tabel mendapatkan squished daripada memasang satu di atas yang berikutnya. Metode kedua dengan padding-bottom: 32768px; margin-bottom: -32768px; cukup menakjubkan dan melakukan hampir persis apa yang saya butuhkan ... terima kasih untuk yang satu itu ... batas bawah adalah masalah ...
Serj Sagan

23

Untuk orang tua:

display: flex;

Untuk anak-anak:

align-items: stretch;

Anda harus menambahkan beberapa awalan, periksa caniuse.


2
Tidak akan merekomendasikan. IE9 masih merupakan hal.

Terima kasih atas jawaban Anda; itu bekerja dengan baik! "Kamu harus menambahkan beberapa awalan, periksa caniuse." apa maksudmu dengan kalimat itu? Bisakah Anda menambahkan sedikit informasi untuk pemula?
Md Sifatul Islam

@MdSifatulIslam Buka di sini: caniuse.com/#feat=flexbox Anda dapat melihat apakah beberapa browser yang Anda perlukan untuk mendukung awalan fitur perlu.
Aiphee

18

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/


Saya tidak tahu mengapa ini bekerja, tetapi itu memecahkan masalah saya seperti pesona. Terima kasih
Combine

Bekerja untuk saya juga. Meskipun itu bukan cara yang bersih. Terima kasih!
Mark Anthony Uy

17
hacky sekali. Saya tidak merekomendasikan ini untuk aplikasi produksi
FedericoCapaldo

ini luar biasa haha. Saya tidak berpikir ini akan berhasil
Tom McDonough

11

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/


tampaknya agak kotor, tetapi bekerja untuk saya - satu-satunya solusi untuk pertanyaan ini. Saya mencoba ini menggunakan bootstrap twitter.
cukabeka

8

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.


orang tua tidak memiliki ketinggian tetap. Ini berkembang sesuai ketinggian anak-kiri.
Veera

Ah, saya pikir banyak, maka Anda akan memerlukan JavaScript, saya akan menambahkannya sebentar lagi.
Olical

@Link JSFiddle Resmi rusak. Hapus atau perbarui jawabannya. Terima kasih!
itsmysterybox

1
Tautan ke js sekarang memberikan 404
Chanoch

5

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.


Poin yang bagus. Bagaimana kalau tinggi anak-anak tergantung pada tinggi saudara tertinggi (apakah itu ditentukan oleh tinggi orang tua atau tidak), dan bukan orang tua? Saya kira itu tidak bisa dilakukan dalam CSS.
mikato

Tidak, saudara kandung tidak dapat mempengaruhi ketinggian satu sama lain. Namun, tata letak display: table+ display: table-cellakan menghasilkan hasil yang diinginkan.
Salman A

Pembaruan hebat! Namun, saya akhirnya mencoba ini dan saya ingin memiliki spasi putih antara divs / sel dan akhirnya harus membuat divs dalam divs tabel-sel untuk mencapai itu dan kemudian tentu saja kehilangan kemampuan untuk membuat mereka menggunakan ketinggian penuh karena div bagian dalam bukan div sel tabel - masalah yang sama persis. Ada ide untuk itu? Agak hilang spasi sel sekarang.
mikato

Ah, ada spasi-batas di CSS! stackoverflow.com/questions/339923/... Saya bisa membuat div seperti tabel saya bekerja dengan baik dengan pemisahan spasi putih dengan menggunakan spasi perbatasan. Sekarang saya memiliki kemampuan untuk membuat sel tabel (blok latar belakang berwarna) menggunakan ketinggian penuh dari induknya atau tidak dengan menggunakan div tabel-sel yang pandai.
mikato

Hanya gotcha yang saya temui: Anda tidak bisa menggunakan ini dengan float: stackoverflow.com/questions/20110217/…
Joshua Pinter

4

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.


1
Anda harus memicu ini setidaknya pada ready, resize, perubahan orientasi, resize font.
netAction

4

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.


1
Hal pertama yang terlintas di benak saya adalah ketinggian: mewarisi tidak yakin mengapa tidak ada yang terbalik
Andreas

3

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


0
<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.


-2

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.