Jak utrzymać dwa divy obok siebie na tej samej wysokości?

441

Mam dwa divy obok siebie. Chciałbym, aby ich wysokość była taka sama i pozostała taka sama, jeśli jeden z nich zmieni rozmiar. Nie mogę tego rozgryźć. Pomysły?

Aby wyjaśnić moje mylące pytanie, chciałbym, aby oba pola były zawsze tego samego rozmiaru, więc jeśli jeden rośnie, ponieważ tekst jest w nim umieszczony, drugi powinien urosnąć, aby dopasować się do wysokości.

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

NibblyPig
źródło
Czy chcesz, aby jeden z nich stawał się większy, a drugi pozostanie tej samej wysokości?
Wai Wong,
Przykład, który nie jest rozwiązaniem, ale znajduje się w edytowalnym środowisku, można znaleźć tutaj: jsfiddle.net/PCJUQ
MvanGeest
Użyj javascript: stackoverflow.com/questions/3275850/...
C. Zając

Odpowiedzi:

592

Flexbox

Dzięki Flexbox jest to jedna deklaracja:

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

W starszych przeglądarkach mogą być wymagane prefiksy, zobacz wsparcie przeglądarki .

Pavlo
źródło
17
Flexbox działał jak urok. Jeśli opracowujesz responsywny projekt i chcesz, aby Twój drugi div działał na mniejszych ekranach, musisz ustawić .row, aby wyświetlić: blok; w zapytaniu o media.
Nick Zulu,
7
@NickZulu Uważam, że w tym przypadku powinieneś ustawić flex-direction: column: jsfiddle.net/sdsgW/1
Pavlo
1
@Eckstein nie jest wymagane dla obu rozwiązań. Zobacz dema.
Pavlo
3
nie działało to dla mnie, dopóki nie dodałem wysokości: 100%; do kolumn dla dzieci
Jacob Raccuia
1
Czy jest możliwe, aby jeden konkretny div dziecka określał wysokość drugiego? Tak więc, jeśli zmienia się zawartość innego div dziecka, nie może zmienić wysokości tego konkretnego
diva
149

Jest to często spotykany problem, ale na szczęście niektóre inteligentne umysły, takie jak Ed Eliot na swoim blogu , opublikowały swoje rozwiązania online.

Zasadniczo to, co robisz, to uczynienie obu div / kolumn bardzo wysokimi przez dodanie padding-bottom: 100%a następnie „oszukanie przeglądarki”, aby pomyślały, że nie są tak wysokie przy użyciu margin-bottom: -100%. Lepiej to wyjaśnia Ed Eliot na swoim blogu, który zawiera również wiele przykładów.

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

lambda
źródło
1
Wyjaśnienie dotyczące One True Layout było trochę kiepskie, ale po sprawdzeniu pierwszego linku zaimplementowałem go dobrze z jednego z przykładów, których użył. Jest to jednak bardzo złe, ponieważ musisz użyć obrazu, który reprezentuje dolną ramkę kolumn, i jest wątpliwy w przypadku obsługi w różnych przeglądarkach. Jednak działa i nie opiera się na javascript, więc zaznaczę to jako poprawne. Dzięki!
NibblyPig
Nie działa to w starszych przeglądarkach IE (tak, niestety nadal muszę obsługiwać IE6). Jakiś sposób, aby uczynić to kompatybilnym?
strongriley
1
@strongriley Checkout Blog Eda Eliota: ejeliot.com/blog/61 Powinno działać w IE6. Może problem jest spowodowany gdzie indziej?
mqchen
1
To pęka, jeśli okno jest zbyt wąskie, a div są umieszczone pod sobą.
WhyNotHugo
1
Jak zdefiniować wypełnienie komórki, które faktycznie ma być obecne w komórce tabeli, np. padding: 7px 10pxJeśli padding-bottomwłaściwość jest ustawiona na 100%? (PS overflow:hiddenbył również wymagany dla mnie na row)
użytkownik1063287
55

Jest to obszar, w którym CSS nigdy tak naprawdę nie miał żadnych rozwiązań - sprowadzasz się do używania <table>tagów (lub udawania ich za pomocą display:table*wartości CSS ), ponieważ jest to jedyne miejsce, w którym zaimplementowano „utrzymywanie grupy elementów na tej samej wysokości”.

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

Działa to we wszystkich wersjach Firefox, Chrome i Safari, Opera od wersji co najmniej 8 oraz w IE od wersji 8.

Paul D. Waite
źródło
5
To rozwiązanie nie jest dostępne dla tych, którzy potrzebują obsługi IE6 / IE7, ale uważam, że jest najczystsze.
twsaef
2
ta odpowiedź jest IDEALNA! tylko małe przypomnienie: może się zdarzyć, że jakiś klient wymaga „tabeli” zamiast „tabeli-wiersza”
Tiborka
@ user2025810: aw, dziękuję. Czy wiesz, których klientów wymagają tablezamiast table-row?
Paul D. Waite,
@ user2025810: tak, nie mogę powiedzieć, że kiedykolwiek to testowałem :) Dobrze wiedzieć, na zdrowie. (Założę się, że ze względu na PDF, obsługuje niektóre z funkcji CSS 2.1 związanych z drukowaniem, które nie są dobrze zaimplementowane w przeglądarkach.)
Paul D. Waite
7
Dzięki temu rozwiązaniu - zapomnij o użyciu wartości procentowej widthdla swoich div, chyba że dodasz display: tableelement nadrzędny, który zepsuje wszystko.
Alex G
42

Korzystanie z jQuery

Korzystając z jQuery, możesz to zrobić w bardzo prostym skrypcie z jedną linią.

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

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

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

Korzystanie z CSS

To jest trochę bardziej interesujące. Technika nosi nazwę Faux Columns . Mniej więcej tak naprawdę nie ustawiasz rzeczywistej wysokości na taką samą, ale ustawiasz niektóre elementy graficzne, aby wyglądały na tę samą wysokość.

Derek Adair
źródło
Myślę, że używanie JavaScript jest bardzo dobrą metodą. Problem polega na tym, że rozpada się, jeśli jest wyłączony. Myślę, że i tak to wykorzystam i zbuduję najlepszą możliwą ewentualność; -) Dzięki!
nicorellius
13
Oznacza to, że wysokość columnOne jest zawsze większa niż columnTwo.
Sébastien Richer
1
Przed zastosowaniem wysokości dla nich należy porównać wysokość kolumn. Myślę, że js jest najlepszą metodą na ten problem, prawie wszystkie przeglądarki są włączone js, jeśli nie, powinny wyjść z twojej witryny i wielu innych stron.
SalmanShariati
6
Działa to również tylko przy pierwszym załadowaniu strony. Jeśli okno zostanie następnie przeskalowane, co spowoduje zmianę rozmiaru div, nie będą one zsynchronizowane
ikariw
16

Dziwi mnie, że nikt nie wspomniał o (bardzo starej, ale niezawodnej) technice Absolute Columns: http://24ways.org/2008/absolute-columns/

Moim zdaniem jest znacznie lepszy zarówno od Faux Column, jak i techniki One True Layout.

Ogólna idea jest taka, że ​​element z position: absolute;ustawi się względem najbliższego elementu nadrzędnego, który ma position: relative;. Następnie rozciągasz kolumnę, aby wypełnić 100% wysokości, przypisując zarówno a top: 0px;i bottom: 0px;(lub dowolną liczbę pikseli / procentów, których faktycznie potrzebujesz). Oto przykład:

<!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>
geofflee
źródło
1
Jeśli prawa kolumna ma więcej wierszy niż lewa, zawartość jest przepełniona.
David
11

Aby to zrobić, możesz użyć wtyczki Jquery's Equal Heights, która sprawia, że ​​wszystkie div mają dokładnie taką samą wysokość jak inne. Jeśli jeden z nich rośnie, a drugi także rośnie.

Oto próbka implementacji

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.

Tutaj jest link

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

Starx
źródło
8

Możesz użyć Faux Columns .

Zasadniczo wykorzystuje obraz tła w zawierającym DIV do symulacji dwóch DIV o równej wysokości. Korzystanie z tej techniki pozwala również dodawać cienie, zaokrąglone rogi, niestandardowe ramki lub inne funky wzory do pojemników.

Działa tylko z polami o stałej szerokości.

Dobrze przetestowany i poprawnie działający w każdej przeglądarce.

Arve Systad
źródło
7

Właśnie zauważyłem ten wątek, szukając tej odpowiedzi. Właśnie stworzyłem małą funkcję jQuery, mam nadzieję, że to pomoże, działa jak urok:

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>
Mike Wells
źródło
1
Użyłem outerHeight do wypełnienia i obramowań. Myślę, że to najczystsze rozwiązanie.
Sébastien Richer
Idealne rozwiązanie, którego szukałem. Inne rozwiązania są dobre w przypadku, gdy wiersz ma kilka kolumn, ale to podejście jest lepsze w przypadku złożonej zawartości HTML. Małe dodawanie: Podczas zmiany rozmiaru dokumentu na responsywnej stronie wysokość zawartości nie zmienia się z powodu ustalonego. Dodałem więc $ ('. Inner'). Css ({height: "initial"}); przed „każdą funkcją”, aby ustawić domyślną wysokość.
bafsar,
5

Siatka CSS

Współczesnym sposobem na zrobienie tego (co pozwala również uniknąć deklarowania <div class="row"></div>owijarki co dwa elementy) byłoby wykorzystanie siatki CSS. Zapewnia to również łatwą kontrolę odstępów między wierszami / kolumnami przedmiotów.

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

connexo
źródło
4

To pytanie zostało zadane 6 lat temu, ale nadal warto udzielić prostej odpowiedzi w układzie Flexbox .

Wystarczy dodać następujący ojciec CSS <div>, to zadziała.

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

Pierwsze dwa wiersze deklarują, że będzie wyświetlany jako flexbox. I flex-direction: rowinformuje przeglądarki, że jego dzieci będą wyświetlane w kolumnach. I align-items: stretchspełni warunek, że wszystkie elementy potomne rozciągną się na tę samą wysokość, na której jeden z nich będzie wyższy.

Hegwin
źródło
1
@TylerH Ale zapytał zredagował swoje pytanie i dodał, 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.które nie jest wymienione w zaakceptowanej odpowiedzi ... Właśnie ukończyłem tutaj. Może powinienem był to skomentować przy przyjętej odpowiedzi?
Hegwin,
1
nie jest to wyraźnie wymienione, ponieważ jest już objęte prostą deklaracją CSS. Otwórz fragment odpowiedzi na pełnym ekranie i zmień rozmiar okna przeglądarki, aby zobaczyć; pozostają one tego samego rozmiaru.
TylerH
1
Nawet jeśli zaakceptowana odpowiedź korzysta z Flexboksa, ta ma inne podejście. align-items: stretch jest tym, co stawia mnie na drodze do rozwiązania mojego problemu w bardzo szczególnej sytuacji.
BenoitLussier
Czy to nie align-items: stretch;domyślne ustawienie Flex?
madav
3

Korzystanie z CSS Flexbox i minimalnej wysokości działało dla mnie

wprowadź opis zdjęcia tutaj

Powiedzmy, że masz pojemnik z dwoma divami w środku i chcesz, aby te dwa divy miały tę samą wysokość.

Można ustawić „ display: flex ” na pojemniku, a także „ align-items: stretch

Następnie daj dziecku divs „ minimalną wysokość ” 100%

Zobacz poniższy kod

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

RealMJDev
źródło
2

Jeśli nie masz nic przeciwko temu, że jeden z divnich jest mistrzem i dyktuje wysokość dla obu divs, to:

Skrzypce

Niezależnie od tego, divpo prawej stronie rozszerzy się lub zgniotu i przepełnienia, aby dopasować się do wysokości divpo lewej stronie.

Oba divs muszą być bezpośrednimi potomkami kontenera i muszą określać w nim swoje szerokości.

Odpowiedni CSS:

.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;
}
Hashbrown
źródło
2

W tym celu lubię używać pseudoelementów. Możesz użyć go jako tła treści i pozwolić im wypełnić przestrzeń.

Dzięki takiemu podejściu można ustawić marginesy między kolumnami, granicami itp.

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

Adrian Menendez
źródło
1

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;            
}
drjorgepolanco
źródło
1

Próbowałem już prawie wszystkich wyżej wymienionych metod, ale rozwiązanie Flexbox nie będzie działać poprawnie w Safari, a metody układu siatki nie będą działać poprawnie ze starszymi wersjami IE.

To rozwiązanie pasuje do wszystkich ekranów i jest kompatybilne z różnymi przeglądarkami:

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

Powyższa metoda będzie równa wysokości komórek, a dla mniejszych ekranów, takich jak telefon komórkowy lub tablet, możemy zastosować @mediametodę wymienioną powyżej.

Jodyshop
źródło
0

możesz łatwo skorzystać z jQuery.

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>

Musisz dołączyć jQuery

pixeltocode
źródło
1
To nie zadziała, jeśli oba <div>mają zawartość dynamiczną. Powodem, dla którego mówię, jest to, <div class="right">że jeśli mam więcej treści niż powstaje inny problem.
Surya,
0

Wiem, że minęło dużo czasu, ale i tak udostępniam swoje rozwiązanie. To sztuczka 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>
Roy Vincent
źródło
-1

Jest to wtyczka jQuery, która ustawia jednakową wysokość dla wszystkich elementów w tym samym rzędzie (poprzez sprawdzenie offset.top elementu. Top). Więc jeśli tablica jQuery zawiera elementy z więcej niż jednego wiersza (inny offset.top), każdy wiersz będzie miał oddzielną wysokość, w oparciu o element o maksymalnej wysokości w tym rzędzie.

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

}

};

Déján Kőŕdić
źródło
-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);

    });
tcao
źródło
1
Proszę podać komentarz do swojej odpowiedzi.
sgnsajgon
-2

Miałem ten sam problem, więc utworzyłem tę małą funkcję za pomocą jquery, ponieważ jquery jest obecnie częścią każdej aplikacji internetowej.

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

Możesz wywołać tę funkcję na zdarzeniu gotowości strony

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

Mam nadzieję, że to ci odpowiada.

Master Programmer
źródło
-3

Ostatnio się z tym spotkałem i nie podobały mi się rozwiązania, więc spróbowałem eksperymentować.

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

tushar747
źródło
-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>

To, co zrobiłem tutaj, to zmiana wysokości na wysokość minimalną i nadanie jej stałej wartości. jeśli jeden z nich zmienia rozmiar, drugi pozostanie na tej samej wysokości. nie jestem pewien, czy tego właśnie chcesz

Wai Wong
źródło
OP chciał, aby div zawsze miały tę samą wysokość.
Simon Forsberg