HTML / CSS: Membuat dua div mengambang dengan tinggi yang sama

106

Saya memiliki sedikit masalah aneh yang saat ini saya pecahkan menggunakan a table, lihat di bawah. Pada dasarnya, saya ingin dua div mengambil 100% dari lebar yang tersedia, tetapi hanya mengambil ruang vertikal sebanyak yang dibutuhkan (yang tidak terlalu jelas dari gambar). Keduanya harus selalu memiliki tinggi yang sama persis dengan garis kecil di antara keduanya, seperti yang ditunjukkan.

teks alt
(sumber: pici.se )

Ini semua sangat mudah dilakukan menggunakan table, yang saat ini saya lakukan. Namun, saya tidak terlalu tertarik pada solusinya, karena secara semantik ini sebenarnya bukan tabel.

html  css  html-table 
— Deniz Dogan
sumber
2
Er ... dimana fotonya? Saya tahu bahwa saya terlambat untuk mengomentari ini
— Ajay Kulkarni
— DidThis

Jawaban:

160

Anda bisa mendapatkan kolom dengan tinggi yang sama di CSS dengan menerapkan bantalan bawah dalam jumlah besar, margin negatif bawah dengan jumlah yang sama dan mengelilingi kolom dengan div yang memiliki luapan tersembunyi. Menengahkan teks secara vertikal sedikit lebih rumit, tetapi ini akan membantu Anda.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>
Luaskan cuplikan

Saya pikir itu layak untuk disebutkan jawaban sebelumnya oleh streetpc memiliki html yang tidak valid, doctype-nya adalah XHTML dan ada tanda kutip tunggal di sekitar atribut. Yang juga perlu diperhatikan adalah ituAnda tidak memerlukan elemen tambahan clearuntuk membersihkan float internal wadah. Jika Anda menggunakan overflow hidden ini menghapus float di semua browser non-IE dan kemudian menambahkan sesuatu untuk memberikan hasLayout seperti width atau zoom: 1 akan menyebabkan IE menghapus float internalnya.

Saya telah menguji ini di semua browser modern FF3 + Opera9 + Chrome Safari 3+ dan IE6 / 7/8. Ini mungkin tampak seperti trik yang jelek tetapi berhasil dengan baik dan saya sering menggunakannya dalam produksi.

Saya harap ini membantu.

— Natalie Downe
sumber
1
Kode yang saya berikan memvalidasi di validator W3C (yah, setelah Anda menambahkan elemen <title>, yang bukan maksud Anda). Selain itu, spesifikasi mengizinkan penggunaan tanda kutip tunggal menurut diskusi ini: sitepoint.com/forums/showthread.php?t=54273#6
— instanceof me
1
Maaf, salah saya. Saya telah mengubah jawaban saya di atas. Perlu diperhatikan, dengan metode Anda, jika kolom kanan menjadi lebih besar dari kiri, warna merah terlihat di bawahnya karena kedua kotak tidak memiliki tinggi yang tepat. Bergantung pada desain, saya akan memilih kolom palsu atau metode ini dengan margin bawah dan bantalan.
— Natalie Downe
2
Sebenarnya meskipun solusi yang diberikan oleh Kevin C. tentang bayangan yang dipotong berfungsi untuk padding atas, kiri dan kanan, itu tidak berfungsi untuk bagian bawah. Sejauh ini belum menemukan solusi.
— JeanMertz
1
Kerja bagus Natalie. @laarsk Ketinggian yang tidak dapat diprediksi persis untuk apa ini bukan? Lihat demo: jsfiddle.net/RT3MT/4 pindahkan paragraf "yang lebih panjang" untuk melihat
— jpillora
1
Ini adalah salah satu hack CSS paling jelek yang pernah saya lihat, tapi saya akan menerimanya dengan tangan terbuka lol. Tampaknya ini satu-satunya cara maju
— Matt Vukas
98

Ini tahun 2012 + n, jadi jika Anda tidak lagi peduli dengan IE6 / 7 display:table,, display:table-rowdan display:table-cellbekerja di semua browser modern:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Pembaruan 2016-06-17: Jika menurut Anda waktunya telah tiba display:flex, periksa Flexbox Froggy .

— Dmitry Leskov
sumber
30
Tahun berapa saat jawaban ini diganti dengan display: flex?
— LandonSchropp
12
Tidak, kami sekarang di 2014 (;
— Francisco Presencia
9
aaaaaadan ini 2015 mungkin di akhir tahun kita bisa mengubah jawaban untuk display: flex :)
— MetalWeirdo
5
Saya masih hidup di tahun 1950-an.
— Jay
1
Halo dari 2016! Kita bisa menggunakan flex sekarang
— Brett Gregson
20

Anda harus menggunakan flexbox untuk melakukannya. Ini tidak didukung di IE8 dan IE9 dan hanya dengan awalan -ms di IE10, tetapi semua browser lain mendukungnya. Untuk prefiks vendor, Anda juga harus menggunakan autoprefixer .

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
— Luca Steeb
sumber
1
Masalah saya dengan flex adalah membutuhkan pembungkus di sekitar kolom. Dengan floats + display: teknik tabel saya dapat memiliki misalnya sebuah header dan sekumpulan kolom dan efeknya bekerja pada kolom tanpa mempengaruhi header.
— Stijn de Witt
10

Anda bisa mendapatkan ini bekerja dengan js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
— Andi P. Trix
sumber
1
Harap perhatikan bahwa pertanyaan ini sudah cukup lama dan solusi yang lebih baik (tanpa membutuhkan javascript) telah disediakan.
— nirazul
1
Saya sebenarnya suka solusi ini. Ini menyenangkan dan menunjukkan bahwa Anda tidak hanya dapat memanipulasi html Anda dengan css, tetapi Anda juga dapat melakukannya dengan bantuan jquery
— csichar
6
Solusi ini tidak akan berfungsi jika ketinggian kolom berubah. Ini bisa terjadi jika konten kolom diubah. Fungsi ini perlu dijalankan: pada perubahan konten dan .on perubahan ukuran browser. Pendekatan css lebih ideal karena menghindari kekhawatiran ini
— alexreardon
5

Ini adalah masalah klasik di CSS. Sebenarnya tidak ada solusi untuk ini.

Artikel dari A List Apart ini adalah bacaan yang bagus tentang masalah ini. Ini menggunakan teknik yang disebut "kolom palsu", berdasarkan memiliki satu gambar latar belakang ubin vertikal pada elemen yang berisi kolom yang menciptakan ilusi kolom dengan panjang yang sama. Karena berada di pembungkus elemen terapung, ini merupakan elemen terpanjang.

Editor A List Apart memiliki catatan ini di artikel:

Catatan dari editor: Meskipun bagus untuk masanya, artikel ini mungkin tidak mencerminkan praktik terbaik modern.

Teknik ini membutuhkan desain lebar yang sepenuhnya statis yang tidak bekerja dengan baik dengan tata letak cair dan teknik desain responsif yang populer saat ini untuk situs lintas perangkat. Untuk situs lebar statis, bagaimanapun, ini adalah pilihan yang dapat diandalkan.

— Philippe Leybaert
sumber
Terima kasih, sepertinya retasan yang bagus. Namun, saya lupa menyebutkan bahwa kolom kanan harus memiliki teks di dalamnya, di tengah secara vertikal. Apakah saya benar dalam mempercayai bahwa kolom palsu tidak dapat melakukan ini?
— Deniz Dogan
4

Saya memiliki masalah serupa dan menurut saya pilihan terbaik adalah menggunakan sedikit javascript atau jquery.

Anda bisa mendapatkan div yang diinginkan memiliki tinggi yang sama dengan mendapatkan nilai div tertinggi dan menerapkan nilai itu ke semua div lainnya. Jika Anda memiliki banyak div dan banyak solusi, saya sarankan untuk menulis sedikit kode js sebelumnya untuk mengetahui div mana yang paling tinggi dan kemudian gunakan nilainya.

Dengan jquery dan 2 divs sangat sederhana, berikut ini contoh kode:

$('.smaller-div').css('height',$('.higher-div').css('height'));

Dan akhirnya, ada 1 hal terakhir. Padding mereka (atas dan bawah) harus sama! Jika salah satu memiliki bantalan yang lebih besar, Anda perlu menghilangkan perbedaan bantalan.

— Bapak Br
sumber
1

Sejauh yang saya tahu, Anda tidak dapat melakukan ini menggunakan implementasi CSS saat ini. Untuk membuat dua kolom dengan tinggi yang sama Anda membutuhkan JS.

— Calin Don
sumber
1

Ini berfungsi untuk saya di IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Juga berfungsi di IE 6 jika Anda menghapus komentar pada div yang lebih jelas di bagian bawah. Mengedit : seperti kata Natalie Downe, Anda bisa menambahkan width: 100%;untuk #containergantinya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Saya tidak tahu cara CSS untuk memusatkan teks secara vertikal di div kanan jika div tidak memiliki tinggi tetap. Jika ya, Anda dapat menyetel line-heightke nilai yang sama dengan tinggi div dan meletakkan div bagian dalam yang berisi teks Anda display: inline; line-height: 110%.

— contoh saya
sumber
1

Dengan menggunakan Javascript, Anda dapat membuat dua tag div memiliki tinggi yang sama. Div yang lebih kecil akan menyesuaikan tingginya sama dengan tag div tertinggi menggunakan kode yang ditunjukkan di bawah ini: 

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Dengan "left" dan "right" menjadi id dari tag div.

— Quintox303
sumber
1

Dengan menggunakan properti css -> display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>
Luaskan cuplikan

0

Menggunakan JS, gunakan data-same-height="group_name"di semua elemen yang Anda ingin memiliki ketinggian yang sama .

Contoh: https://jsfiddle.net/eoom2b82/

Kode:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});
— Wiliam
sumber
0

Saya perlu melakukan sesuatu yang serupa, inilah implementasinya. Untuk merekap tujuannya, itu adalah untuk memiliki 2 elemen yang mengambil lebar wadah induk tertentu, dan tingginya hanya setinggi yang seharusnya. Pada dasarnya tinggi sama dengan tinggi maksimal dari jumlah konten terbesar, tetapi wadah lain sedang menyiram.

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

css

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
— orang ini
sumber
0

Beberapa tahun yang lalu, floatproperti yang digunakan untuk memecahkan masalah dengan tablependekatan menggunakan display: table;dan display: table-row;dan display: table-cell;.

Tapi sekarang dengan properti flex, Anda bisa menyelesaikannya dengan 3 baris kode: display: flex;dan flex-wrap: wrap;danflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%adalah flexnilai yang kami berikan: flex-grow flex-shrink flex-basismasing-masing. Ini adalah pintasan yang relatif baru di flexbox untuk menghindari mengetiknya satu per satu. Saya harap ini membantu seseorang di luar sana

— Fouad Boukredine
sumber
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.