Tip Singkat: Menyelesaikan Teka-Teki Kolom Dengan Tinggi Yang Sama

() translation by (you can also view the original English article)

Ada satu masalah umum dalam desain web yang telah ada sejak kita berpindah dari hari-hari desain berbasis tabel ke dalam era CSS, dan itu adalah:

Bagaimana saya dapat memiliki background 100% height dalam layout multi kolom yang fleksibel?

Ada beberapa solusi untuk dilema ini. Bagaimana pun juga, yang akan kita cover kali ini mungkin cocok untuk projectmu jika kamu membutuhkan:

Gambar background, border, efek CSS3 dan lain-alin yang diterapkan pada kolommu.
Lebih dari tiga kolom
Kolom dengan tinggi dan lebar yang fleksibel

Satu pilihan adalah memesan layanan kustomisasi website yang cepat dan efisien dari Envato Studio. Kamu dapat memilih dari berbagai penyedia berpengalaman, memeriksa ulasan mereka, dan kemudian mengirimkan kepada detail modifikasi yang tepatnya kamu butuhkan.

Jika tidak, mari kita mulai dengan sebuah tampilan singkat masalahnya.

Perilaku Background Column Secara Default

Gambar di bawah adalah layout tiga kolom sederhana, menggunakan pendekatan standar dalam mengarahkan tiap kolom ke kiri. Dengan background yang diterapkan dalam gaya default, kolom-kolom itu disesuaikan dengan tinggi konten mereka seperti berikut:

Ini adalah fungsional, namun tidak cukup menjadi layout yang menarik mata karena perbedaan tinggi yang signifikan.

HTML untuk di atas menempatkan tiga elemen "konten kolom" dalam sebuah pembungkus.

<div class="wrap">
    <div class="content">...</div>
    <div class="sidebar">...</div>
    <div class="sidebar_two">...</div>
</div>

CSS untuk elemen "konten kolom" ini adalah:

.content {
    width:60%;
    float:left;
    padding: 20px 30px;
    background: #fff;
    color: #6d7072;
}
.sidebar {
    width:20%;
    float:left;
    padding: 20px 30px;
    background: #5f6673;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two {
    width:20%;
    float:left;
    padding: 20px 30px;
    background: #434750;
    color: #ebeef3;
    font-size: 90%;
}

Solusi: Pseudo-Elements

Ketika kita mengacu pada kolom dengan tinggi yang sama, apa yang sebenarnya kita inginkan adalah untuk memuaskan dua kondisi:

Mengijinkan tinggi kolom menyesuaikan dengan jumlah konten di dalamnya secara fleksibel.
Mengatur tinggi background yang seragam secara independen pada jumlah konten pada tiap kolom.

Dalam contoh di atas kita telah memiliki kondisi pertama dari tinggi yang fleksibel. Bagaimana pun juga style background dan aturan tinggi yang fleksibel merupakan bagian class yang sama, diterapkan pada elemen yang sama. Apapun aturan tinggi yang diikuti elemen itu, background akan mengikuti mereka juga.

Karena itu jika kita ingin background memiliki pengaturan tinggi yang berbeda, kita akan membutuhkan elemen yang berbeda dimana kita menerapkan background style bersamaan dengan aturan tingginya sendiri. Untuk membuat elemen terpisah ini tanpa menambahkan markup ekstra, kita akan menggunakan pseudo-elements.

Untuk tiap kolom kita akan menggunakan :before pseudo-selector untuk membuat pseudo-element terpisah, yang akan kita terapkan pada style background. Kemudian kita akan menggunakan kombinasi penempatan posisi yang absolut dan z-index untuk menempatkan background ini di belakang konten untuk tiap kolom dan menetapkan tinggi yang seragam pada mereka.

CSS yang baru untuk tiap kolom menjadi:

.content, .content:before {
    width:60%;
}
.content {
    float:left;
    padding: 20px 30px;
    color: #6d7072;
}
.content:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
    background: #fff;
}

.sidebar, .sidebar:before {
    width:20%;
}
.sidebar {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 60%;
    background-color: #5f6673;
}

.sidebar_two, .sidebar_two:before {
    width:20%;
}
.sidebar_two {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 80%;
    background-color: #434750;
}

Yang memberikan kita tampilan tinggi kolom yang bagus dan merata:

Bagaimana Itu Dilakukan

Pada intinya yang kita lakukan di sini adalah menetapkan posisi pseudo-elements "background-holder" di belakang elemen "column-content" reguler untuk membuat style background.

Karena pseudo-elements "background holder" ini benar-benar diposisikan kita dapat memberi tahu tepatnya posisi tepi terluar mereka, sembari tetap membolehkan elemen "column-content" berada pada ketinggian apapun yang dibutuhkan.

Elemen `.wrap`, tiga elemen anaknya beserta pseudo-elemennya.

Tiap elemen kolom memiliki pseudo-element, yang bertindak sebagai background.

Penting: kolommu haruslah berada di dalam sebuah pembungkus induk (dalam kasus ini adalah .wrap) yang ditentukan pada position: relative; pada urutan penentuan posisi untuk berfungsi. Ini akan menjelaskan kolom untuk memastikan itu menerima nilai height background untuk melebar.

Pendekatan Alternatif dan Tambahan

Ada beberapa pendekatan bagus yang menyarankan cara lain untuk menyelesaikan masalah ini. Jika kamu tidak membutuhkan tambahan khusus pendekatan ini, kamu mungkin memilih salah satu solusi di bawah.

Warna Datar vs. Gambar Background dan Efek Ekstra

Jika kamu merencanakan untuk menggunakan hanya warna datar dalam backgroundmu, maka sebuah solusi yang sangat cerdas adalah menerapkan gradient CSS horizontal, membuat pita warna untuk disejajarkan dengan kolom. Periksa bagaimana caranya, terima kasih kepada Chris Coyier.

Bagaimana pun juga juga desainmu membutuhkan gambar, border, efek CSS3 dan sebagainya untuk diterapkan pada background maka teknik div "penahan background" kita mungkin lebih cocok, misalnya.

Kurang Dari, Atau Lebih Dari Tiga Kolom

Solusi sangat keren lainnya adalah menggunakan pseudo selector :before dan :after pada pembungkus induk kolom untuk membuat hingga tiga kolom dengan tinggi background yang sama. Kamu dapat membaca tentang teknik ini, dijelaskan oleh Nicolas Gallagher.

Pada sisi lain jika kamu butuh lebih dari tiga kolom kamu mungkin ingin menggunakan teknik "penahan background" bukannya kamu dapat memiliki sebanyak kolom sesukamu. misalnya:

Kesimpulan

Setelah kita melihat dukungan browser yang meluas untuk flexbox itu harusnya menjadi cukup jelas untuk melakukan hal-hal seperti ini tanpa perlu bergantung pada pseudo-element.

Bagaimana pun juga, antara sekarang dan dulu, ini adalah cara yang bagus untuk menyelesaikan pekerjaan. Itu membuatmu menjaga lebar yang fleksibel untuk layout responsif, gunakan kolom sebanyak yang kamu suka dan terapkan jenis background styling apapun.