Di bawah ini kita akan mempelajari cara membuat kolom dengan tinggi yang sama dengan CSS. Ketika kita akan membuat sebuah website yang memiliki banyak kolom berdampingan, seringkali kita mengininkan kolom tersebut memiliki tinggi yang sama agar baik dipandang. Di bawah ini merupakan salah satu contoh kolom berdampingan yang memiliki tinggi yang sama:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .col-container { display: table; width: 100%; } .col { display: table-cell; padding: 16px; } </style> </head> <body> <h2>Equal Height Columns</h2> <p>Buat kolom sesuai dengan tinggi kolom tertinggi.</p> <div class="col-container"> <div class="col" style="background:CadetBlue"> <h2>Column 1</h2> <p>Hospital Playlist 2 Soon!</p> </div> <div class="col" style="background:Aqua"> <h2>Column 2</h2> <p>Hospital Playlist 2 Soon!</p> <p>Hospital Playlist 2 Soon!</p> <p>Hospital Playlist 2 Soon!</p> <p>Hospital Playlist 2 Soon!</p> </div> <div class="col" style="background:CadetBlue"> <h2>Column 3</h2> <p>Hospital Playlist 2 Soon!</p> <p>Hospital Playlist 2 Soon!</p> <p>Hospital Playlist 2 Soon!</p> </div> </div> </body> </html>
Section Artikel
Cara Membuat Kolom Tinggi Sama
Langkah 1) Tambahkan HTML:
Contoh
<div class="col-container">
<div class="col" style="background:CadetBlue">
<h2>Column 1</h2>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:Aqua">
<h2>Column 2</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:CadetBlue">
<h2>Column 3</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
</div>
Langkah 2) Tambahkan CSS:
Contoh
.col-container {
display: table; /* Buat elemen container berperilaku seperti tabel */
width: 100%; /* Atur lebar maksimum untuk memperluas seluruh halaman */
}
.col {
display: table-cell; /* Membuat elemen di dalam container berperilaku seperti sel tabel */
}Kolom Sama Tinggi yang Responsif
Kolom yang kita buat pada contoh sebelumnya bersifat responsif (jika ingin mengubah ukuran jendela browser , kita akan melihat bahwa mereka secara otomatis menyesuaikan dengan lebar dan tinggi yang diperlukan). Namun, untuk layar kecil (seperti smartphone), mungkin mereka akan menumpuk secara vertikal, bukan horizontal:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.col-container {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 16px;
}
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Equal Height Columns</h2>
<p>Ubah ukuran jendela browser untuk melihat hasilnya. Kolom secara otomatis akan menumpuk di layar yang lebih kecil dari 600px.</p>
<div class="col-container">
<div class="col" style="background:Brown">
<h2>Column 1</h2>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:Crimson">
<h2>Column 2</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:Brown">
<h2>Column 3</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
</div>
</body>
</html>
Agar dapat seperti contoh di atas, tambahkan kueri media dan tentukan nilai piksel breakpoint untuk kapan hal ini harus terjadi:
Contoh
/*Jika jendela browser lebih kecil dari 600px, buat tumpukan kolom di atas satu sama lain */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}Tinggi dan Lebar Setara menggunakan Flexbox
Kita juga dapat menggunakan Flexbox untuk membuat kotak dengan tinggi yang sama:
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
</style>
</head>
<body>
<h2>Equal Height Columns Dengan Flexbox</h2>
<p>Buat kolom sesuai dengan tinggi kolom tertinggi.</p>
<div class="col-container">
<div class="col" style="background:CadetBlue">
<h2>Column 1</h2>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:Aqua">
<h2>Column 2</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
<div class="col" style="background:CadetBlue">
<h2>Column 3</h2>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
<p>Hospital Playlist 2 Soon!</p>
</div>
</div>
</body>
</html>
Catatan: Flexbox tidak didukung di Internet Explorer 10 dan versi sebelumnya.
