masih dalam konteks CSS Flexbox. hampir sama dengan
layout footer tetap di bawah dengan Flexbox. namun kali kali ini saya hususkan hanya pada sidebar dengan 2 kolom atau 3 kolom. Perhatikan code-code CSS agar lebih jelas apa dan bagaimana fungsinya.
ada beberapa cara agar sidebar sama tinggi dengan main konten atau sebaliknya yaitu menggunakan CSS ataupun dengan
javascript atau
jQuery, sebelum adanya CSS flexbox pilahan lain adalah menggunakan table namun bukan itu yang akan kita bahas, kita akan tetap memanfaatkan layout Flexbox.
cara pertama kita bahas dengan CSS Flexbox pada dasarnya hal ini paling mudah untuk kita pahami dan terapkan. hal yang pertama adalah membuat
HTML nya dulu, tanpa itu
CSS seribu kata pun gak akan nampak hasilnya..
kita ambil contoh HTML nya seperti ini
<div class="container"> <!-- FlexBox -->
<div class="konten">Konten</div>
<div class="sidebar-kiri">Sidebar Kiri</div>
<div class="sidebar-kanan">Sidebar Kanan</div>
</div>
Buat CSS pada container menggunakan
display:flex.container{
display: flex; /* atau inline-flex */
}
/*
Atau Lengkap Dengan Dukungan Semua Browser.
*/
.container{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; /* atau inline-flex */
}
CSS di atas sudah mewakili bahwa item yang berada pada wadah
container sudah dalam posisi flexible - standarnya item-item tersebut memiliki arah
horizontal / row. hasilnya seperti ini, dan memiliki sama tinggi.
namun untuk masing-masing kolom jangan pernah memberi nilai masukan
height. misal
height:100% kecuali
min-height.
Perlu di ingat penggunaan
display:flex berbeda dengan
display:inline | block yang bergantung berapa nilai masukan seperti
width: <integer>%/<integer>px/<integer>vw/<integer>....
untuk tambahan CSS lain kalian bisa diskusikan pada komentar.
solusi lain yaitu dengan memanfaatkan
jQuery. karena hampir semua Web design/Blog menyimpan Script jQuery kenapa tidak kita manfaatkan saja untuk mengatur sama tinggi.
Code scriptnya kurang lebih seperti berikut. (
perkecil jika kalian menguasai script Variabl atau if else) script ini untuk 3 kolom. kalau 2 kolom script akan lebih pendek.
// Object Kolom
var c = $('.konten'); // class box .konten
var s = $('.sidebar-kiri'); // class box .sidebar-kiri
var k = $('.sidebar-kanan'); // class box .sidebar-kanan
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
var getKananHeight = k.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
s.css('min-height', getKontenHeight);
}else{
if(getKananHeight > getKiriHeight){
s.css('min-height', getKananHeight);}
}
if ( getKontenHeight > getKananHeight) {
k.css('min-height', getKontenHeight);
}else{
if(getKiriHeight > getKananHeight){
k.css('min-height', getKiriHeight);}
}
// cek jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
c.css('min-height', getKiriHeight);
}else{
if(getKananHeight > getKontenHeight){
c.css('min-height', getKananHeight);}
}
untuk 2 kolom kurang lebih seperti ini
// Object Kolom
var c = $('.konten'); // class box .konten
var s = $('.sidebar-kiri'); // class box .sidebar-kiri
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
s.css('min-height', getKontenHeight);
}
// cek jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
c.css('min-height', getKiriHeight);
}
Sesuatu yang tidak di inginkan terjadi. inilah kekurangan menggunakan jquary. kasus tersebut terjadi pada perangkat mobile/tablet/phone ketika memutar layar dari Potrait ke landscape ataupun sebaliknya. namun hal tersebut akan normal jika browser di refresh. mungkin ada beberapa faktor yang kurang pada script atau memang script tersebut akan berjalan dalam kondisi awal atau pada saat kita membuka pertama kali.
Cara Penerapan Layout kolom Header,Konten,Sidebar,Footer responsive menggunakan Pure CSS Flexbox lihat demonya.
Untuk keperluan PageSpeed Insights agar penggunaan script seperti javascript pada jQuery Library bisa kita sembunyikan penempatanya. namun saya tidak bisa mengatakan dengan mengatasi masalah ini bisa membuat speed halaman web/blog lebih cepat. karana pada dasarnya halaman akan membaca keseluruhan penggunaan script yang ada.
Bagi para pengguna Template XML Blogger yang berniat untuk set javascript dari jQuery Library menjadi async (Asynchronous). mungkin ini di maksudkan Mengatasi Render-Blocking Javascript alhasil script jquery yang ada malah tidak berjalan pada peramban tertentu semisal firefox padahal kalau di buka pada browser Chrome/Opera berjalan lancar. lalu apa masalahnya ?