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>

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 .

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>

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.

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 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>

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/

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.

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>

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>

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.

Menggunakan CSS Flexbox dan ketinggian minimum bekerja untuk saya

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>

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

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>

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

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.

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

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>

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] );

}

};

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

    });

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.

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

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

<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