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>

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 .

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>

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.

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

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>

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/

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.

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>

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>

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.

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

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>

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

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>

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

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.

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

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>

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

}

};

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

    });

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.

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

<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