Bagaimana cara menjaga dua div yang berdampingan tingginya sama?


442

Saya memiliki dua divs berdampingan. Saya ingin ketinggian mereka sama, dan tetap sama jika salah satu dari mereka mengubah ukuran. Saya tidak tahu yang satu ini. Ide ide?

Untuk memperjelas pertanyaan saya yang membingungkan, saya ingin kedua kotak selalu berukuran sama, jadi jika salah satu tumbuh karena teks ditempatkan ke dalamnya, yang lain harus tumbuh agar sesuai dengan ketinggian.

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>


Apakah Anda ingin jika salah satu dari mereka semakin besar, yang lain akan tetap memiliki ukuran tinggi yang sama?
Wai Wong

Contoh yang bukan solusi tetapi berada dalam lingkungan yang dapat diedit dapat ditemukan di sini: jsfiddle.net/PCJUQ
MvanGeest

Jawaban:


592

Flexbox

Dengan flexbox itu adalah deklarasi tunggal:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Awalan mungkin diperlukan untuk browser yang lebih lama, lihat dukungan browser .


17
flexbox bekerja seperti pesona. Jika Anda mengembangkan desain responsif dan Anda ingin div kedua turun di layar yang lebih kecil, Anda perlu mengatur .row untuk menampilkan: blok; dalam permintaan media Anda.
Nick Zulu

7
@Nickarui Saya percaya dalam hal ini Anda harus mengatur flex-direction: column: jsfiddle.net/sdsgW/1
Pavlo

1
@ Eckstein itu tidak diperlukan untuk kedua solusi. Lihat demo.
Pavlo

3
ini tidak bekerja untuk saya sampai saya menambahkan tinggi: 100%; ke kolom anak-anak
Jacob Raccuia

1
Apakah mungkin untuk membuat satu div anak tertentu menentukan ketinggian yang lain? Sehingga jika konten div anak lainnya berubah, ia tidak dapat mengubah ketinggian div khusus itu
Narek Malkhasyan

149

Ini adalah masalah umum yang banyak ditemui, tetapi untungnya beberapa pikiran cerdas seperti Ed Eliot di blognya telah memposting solusi mereka secara online.

Pada dasarnya apa yang Anda lakukan adalah membuat kedua div / kolom sangat tinggi dengan menambahkan padding-bottom: 100%dan kemudian "menipu browser" untuk berpikir mereka tidak menggunakan yang tinggi margin-bottom: -100%. Lebih baik dijelaskan oleh Ed Eliot di blog-nya, yang juga mencakup banyak contoh.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>


1
Penjelasan tentang One True Layout agak buruk, tetapi setelah memeriksa tautan pertama saya menerapkannya dengan baik dari salah satu contoh yang ia gunakan. Namun itu sangat buruk karena Anda harus menggunakan gambar untuk mewakili batas bawah kolom, dan itu meragukan untuk dukungan lintas-browser. Namun itu berfungsi dan tidak bergantung pada javascript, jadi saya akan menandainya sebagai benar. Terima kasih!
NibblyPig

Ini sepertinya tidak berfungsi di browser IE lama (ya, sayangnya saya masih harus mendukung IE6). Adakah cara untuk membuat ini kompatibel?
strongriley

1
@strongriley Checkout Blog Ed Eliot: ejeliot.com/blog/61 Ini seharusnya berfungsi di IE6. Mungkin masalahnya disebabkan di tempat lain?
mqchen

1
Ini pecah jika jendela terlalu sempit dan div ditempatkan di bawah satu sama lain.
WhyNotHugo

1
Bagaimana Anda menentukan sel yang benar-benar Anda inginkan ada di dalam sel tabel, misalnya padding: 7px 10px, jika padding-bottomproperti diatur ke 100%? (PS overflow:hiddenjuga diperlukan untuk saya di row)
user1063287

55

Ini adalah area di mana CSS tidak pernah benar-benar memiliki solusi - Anda turun menggunakan <table>tag (atau berpura-pura menggunakan display:table*nilai-nilai CSS ), karena itulah satu-satunya tempat di mana "menjaga banyak elemen dengan ketinggian yang sama" diterapkan.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

Ini berfungsi di semua versi Firefox, Chrome dan Safari, Opera dari setidaknya versi 8, dan di IE dari versi 8.


5
Solusi ini tidak tersedia bagi mereka yang perlu mendukung IE6 / IE7, tapi saya percaya ini yang terbersih.
twsaef

2
jawaban ini SEMPURNA! hanya pengingat kecil: itu mungkin terjadi bahwa beberapa klien memerlukan "tabel" bukan "table-row"
tiborka

@ user2025810: aw, terima kasih. Apakah Anda tahu yang diminta klien tablebukan table-row?
Paul D. Waite

@ user2025810: Astaga, tidak bisa mengatakan saya pernah diuji dalam hal itu :) Senang mengetahui, cheers. (Mengingat fokus PDF-nya, saya yakin itu mendukung beberapa fitur cetak terkait CSS 2.1 yang tidak diimplementasikan dengan baik di browser.)
Paul D. Waite

7
Dengan solusi ini - lupakan tentang menggunakan persentase widthuntuk div Anda, kecuali jika Anda menambahkan display: tablepada elemen induk, yang akan mengacaukan segalanya.
Alex G

42

Menggunakan jQuery

Menggunakan jQuery, Anda dapat melakukannya dalam skrip satu baris super sederhana.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Menggunakan CSS

Ini sedikit lebih menarik. Teknik ini disebut Faux Columns . Kurang lebih Anda tidak benar-benar mengatur ketinggian sebenarnya menjadi sama, tetapi Anda memasang beberapa elemen grafis sehingga mereka terlihat sama tinggi.


Saya pikir menggunakan JavaScript adalah metode yang sangat bagus. Masalahnya adalah - berantakan jika dinonaktifkan. Saya pikir saya akan tetap menggunakan ini dan membangun kemungkinan terbaik yang saya bisa; -) Terima kasih!
nicorellius

13
Ini menyiratkan bahwa ketinggian columnOne'S selalu lebih besar dari columnTwo.
Sébastien Richer

1
Anda harus membandingkan ketinggian kolom sebelum menerapkan ketinggian untuk mereka. Saya pikir js adalah metode terbaik untuk masalah ini, hampir semua browser diaktifkan, jika tidak, mereka harus keluar dari situs web Anda dan banyak situs web lainnya.
SalmanShariati

6
Ini juga hanya akan berfungsi saat halaman dimuat pertama kali. Jika jendela kemudian diubah ukurannya, menyebabkan divs untuk mengubah ukuran maka mereka tidak akan tetap sinkron
ikariw

16

Saya terkejut bahwa tidak ada yang menyebutkan teknik Kolom Absolut (sangat tua tapi dapat diandalkan): http://24ways.org/2008/absolute-columns/

Menurut pendapat saya, itu jauh lebih unggul daripada kedua Kolom Faux dan teknik One True Layout.

Gagasan umum adalah bahwa elemen dengan position: absolute;posisi akan terhadap elemen induk terdekat yang dimiliki position: relative;. Anda kemudian meregangkan kolom untuk mengisi ketinggian 100% dengan menetapkan a top: 0px;dan bottom: 0px;(atau piksel / persentase apa pun yang Anda butuhkan.) Berikut ini sebuah contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

1
Jika kolom kanan memiliki lebih banyak baris daripada kiri, konten meluap.
David

11

Anda dapat menggunakan Jquery's Equal Heights Plugin untuk menyelesaikannya, plugin ini membuat semua div dengan ketinggian yang sama persis dengan yang lain. Jika salah satu dari mereka tumbuh dan yang lain juga akan tumbuh.

Berikut contoh implementasinya

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Ini tautannya

http://www.cssnewbie.com/equalheights-jquery-plugin/


8

Anda bisa menggunakan Kolom Faux .

Pada dasarnya ia menggunakan gambar latar belakang dalam DIV yang mengandung untuk mensimulasikan dua DIVs sama tinggi. Menggunakan teknik ini juga memungkinkan Anda untuk menambahkan bayangan, sudut bundar, batas khusus atau pola funky lainnya ke wadah Anda.

Hanya bekerja dengan kotak dengan lebar tetap.

Diuji dengan baik dan berfungsi dengan baik di setiap browser.


7

Hanya melihat utas ini saat mencari jawaban ini. Saya baru saja membuat fungsi jQuery kecil, semoga ini membantu, berfungsi seperti pesona:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

1
Saya menggunakan outerHeight untuk memasukkan padding dan borders. Ini adalah solusi terbersih menurut saya.
Sébastien Richer

Solusi sempurna yang saya cari. Solusi lain baik untuk kasus bahwa satu baris memiliki beberapa kolom tetapi pendekatan ini lebih baik untuk konten html yang kompleks. Penambahan kecil: Ketika mengubah ukuran dokumen di halaman responsif, tinggi konten tidak berubah karena diperbaiki. Jadi, saya menambahkan $ ('. Inner'). Css ({height: "initial"}); sebelum 'setiap fungsi' untuk mengatur ketinggian ke default.
bafsar

5

Cara grid CSS

Cara modern untuk melakukan ini (yang juga menghindari keharusan menyatakan a <div class="row"></div> -wrapper di setiap dua item) adalah menggunakan kisi-kisi CSS. Ini juga memberi Anda kontrol mudah pada celah antara baris / kolom item Anda.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>


4

Pertanyaan ini ditanyakan 6 tahun yang lalu, tetapi masih layak untuk memberikan jawaban sederhana dengan flexbox tata letak saat ini.

Cukup tambahkan CSS berikut ke ayah <div>, itu akan berhasil.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

Dua baris pertama menyatakan itu akan ditampilkan sebagai flexbox. Dan flex-direction: rowmemberi tahu browser bahwa anak-anaknya akan ditampilkan dalam kolom. Dan align-items: stretchakan memenuhi persyaratan bahwa semua elemen anak akan meregang ke ketinggian yang sama itu salah satunya menjadi lebih tinggi.


1
@ TylerH Tapi yang ditanyakan telah mengedit pertanyaannya dan menambahkan I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.yang tidak disebutkan dalam jawaban yang diterima ... Saya baru saja menyelesaikannya di sini. Mungkin saya harus mengomentari jawaban yang diterima?
Hegwin

1
itu tidak disebutkan secara eksplisit karena sudah dicakup oleh deklarasi CSS sederhana. Buka Cuplikan jawaban dalam layar penuh dan ubah ukuran jendela browser Anda untuk melihatnya; ukurannya tetap sama satu sama lain.
TylerH

1
Bahkan jika jawaban yang diterima menggunakan flexbox, jawaban ini memiliki pendekatan yang berbeda. align-items: stretch adalah yang membuat saya berada di jalur untuk menyelesaikan masalah saya dalam situasi yang sangat khusus.
BenoitLussier

Bukankah align-items: stretch;flex itu default?
madav

3

Menggunakan CSS Flexbox dan ketinggian minimum bekerja untuk saya

masukkan deskripsi gambar di sini

Katakanlah Anda memiliki wadah dengan dua div di dalamnya dan Anda ingin kedua div tersebut memiliki ketinggian yang sama.

Anda akan mengatur ' display: flex ' pada wadah serta ' align-items: stretch '

Maka cukup beri anak divs ' ketinggian min ' 100%

Lihat kode di bawah ini

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>


2

Jika Anda tidak keberatan salah satu dari divmereka menjadi master dan mendikte ketinggian untuk keduanya divada ini:

Biola

Apa pun yang terjadi, divdi sebelah kanan akan melebar atau menindih & melimpah agar sesuai dengan ketinggian divdi sebelah kiri.

Kedua div harus merupakan anak langsung dari sebuah wadah, dan harus menentukan lebarnya di dalamnya.

CSS yang relevan:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

2

Saya suka menggunakan elemen semu untuk mencapai ini. Anda dapat menggunakannya sebagai latar belakang konten dan biarkan mereka mengisi ruang.

Dengan pendekatan ini Anda dapat mengatur margin antara kolom, batas, dll.

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>


1

Itu Fiddle

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

1

Saya telah mencoba hampir semua metode yang disebutkan di atas, tetapi solusi flexbox tidak akan berfungsi dengan benar dengan Safari, dan metode tata letak kotak tidak akan berfungsi dengan benar dengan versi IE yang lebih lama.

Solusi ini cocok untuk semua layar dan kompatibel lintas-browser:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

Metode di atas akan sama dengan tinggi sel, dan untuk layar yang lebih kecil seperti ponsel atau tablet, kita dapat menggunakan @mediametode yang disebutkan di atas.


0

Anda dapat menggunakan jQuery untuk mencapai ini dengan mudah.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

Anda harus memasukkan jQuery


1
Ini tidak akan berfungsi jika keduanya <div>memiliki konten dinamis. Alasan saya katakan adalah jika <div class="right">memiliki lebih banyak konten maka masalah lainnya muncul.
Surya

0

Saya tahu ini sudah lama tapi saya tetap membagikan solusi saya. Ini adalah trik jQuery.

--- HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

-1

Ini adalah plugin jQuery yang menetapkan tinggi yang sama untuk semua elemen pada baris yang sama (dengan memeriksa offset.top elemen). Jadi, jika jQuery array Anda mengandung elemen dari lebih dari satu baris (offset.top berbeda), setiap baris akan memiliki tinggi yang terpisah, berdasarkan elemen dengan tinggi maksimum di baris itu.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};


-2
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

1
Harap berikan komentar apa pun untuk jawaban Anda.
sgnsajgon

-2

Saya mengalami masalah yang sama jadi saya membuat fungsi kecil ini menggunakan jquery karena jquery adalah bagian dari setiap aplikasi web saat ini.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

Anda dapat memanggil fungsi ini pada acara siap halaman

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

Saya harap ini berhasil untuk Anda.


-3

Saya baru-baru ini menemukan ini dan tidak terlalu menyukai solusi, jadi saya mencoba bereksperimen.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}


-4
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

Apa yang saya lakukan di sini adalah mengubah tinggi ke min-tinggi dan memberinya nilai tetap. jika salah satu dari mereka diubah ukurannya, yang lain akan tetap sama tingginya. tidak yakin apakah ini yang Anda inginkan


OP ingin divs selalu memiliki ketinggian yang sama.
Simon Forsberg
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.