Membuat Layout Sidebar Sama Tinggi Dengan Konten

Layout Sidebar Sama Tinggi
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.
Layout Sidebar Sama Tinggi Dengan Konten
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.

flexbox colom 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.
masalah tinggi layout sidebar
Cara Penerapan Layout kolom Header,Konten,Sidebar,Footer responsive menggunakan Pure CSS Flexbox lihat demonya.


Theme equip :DISQUSjQueryBootstrapBlogger
eden creative