JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="container"> <!-- FlexBox -->
    <div class="konten">Konten
    <p>Ketika Halaman Terisi Lebih banyak dari ckolom lain seperti sidebar. maka secara otomatis ukuran tinggi masing-masing kolom akan mengikuti tinggi konten ataupun sebaliknya by shannenpio</p>
    </div>
    <div class="sidebar-kiri">Sidebar Kiri</div>
    <div class="sidebar-kanan">Sidebar Kanan</div>
</div>

CSS

*{margin:0px;padding:0px;box-sizing:border-box;}
.container{
  color:white;
  font:normal 20px Arial,Tahoma,Serif
}
.konten,.sidebar-kiri,.sidebar-kanan{padding:20px;}
.konten{
  background:red;
  width:50%;
  min-height:400px;
  float:left;
}
.sidebar-kiri{
  background:blue;
  width:25%;
  float:left;
}
.sidebar-kanan{
  background:green;
  width:25%;
  float:left;
}

JavaScript

// 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);}
}