Cara Membuat Tinggi Kolom Sama Menggunakan Jquery

07/05/2019    Shelli Ripati    110     Website

Tinggi suatu elemen akan berbeda ketika jumlah isi dalamnya juga berbeda. Contohnya ketika kita membuat beberapa tag div dalam satu baris yang didalamnya terdapat paragraph dengan jumlah karakternya berbeda atau jika kita memberikan gambar yang memiliki tinggi berbeda maka tinggi tag div juga berpengaruh. Kali ini saya akan membahas Cara Membuat Tinggi Kolom Sama Menggunakan Jquery.

Langkah pertama Cara Membuat Tinggi Kolom Sama Menggunakan Jquery yaitu teman-teman buat struktur html seperti di bawah ini.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <title>Cara Membuat Tinggi Kolom Sama Menggunakan Jquery</title>

  </head>

  <body>

    <div class="container">

      <div class="row">

        <div class="col-12">

          <h1>Cara Membuat Tinggi Kolom Sama Menggunakan Jquery</h1>

        </div>

      </div>

      <div class="row">

        <div class="col-md-4">

          <div class="kolom bg-secondary p-2">

            <h1 class="text-center">Kolom Satu</h1>

            <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          </div>

        </div>

        <div class="col-md-4">

          <div class="kolom bg-info p-2">

            <h1 class="text-center">Kolom Dua</h1>

            <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

          </div>

        </div>

        <div class="col-md-4">

          <div class="kolom bg-success p-2">

            <h1 class="text-center">Kolom Tiga</h1>

            <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s </p>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

Jika sudah maka teman-teman buat script jquery dengan menggunakan fungsi height untuk mencari tinggi maksimal dari div dan lalu mengatur tinggi div menjadi sama. Dan berikut adalah scriptnya.

<script>

  $(document).ready(function(){

    var heights=[];

    $(".kolom").each(function() {

      heights.push($(this).height());

    });

    var maxHeight = Math.max.apply(null, heights);

    $(".kolom").height(maxHeight);

  })

</script>

Jika ditampilkan di halaman website maka akan seperti pada gambar di bawah ini.

Cara Membuat Tinggi Kolom Sama Menggunakan Jquery

Demikian Cara Membuat Tinggi Kolom Sama Menggunakan Jquery. Semoga bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More