441

У мене два бійки поруч. Я хотів би, щоб висота їх була однаковою, і залишатись однаковою, якщо одна з них змінить розмір. Я не можу цього зрозуміти. Ідеї?

Щоб уточнити своє заплутане запитання, я хотів би, щоб обидва поля завжди були однакового розміру, тому якщо одна зростає через те, що текст розміщений у ній, інший повинен зростати відповідно до висоти.

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

Розгорніть фрагмент

— Скуба свиня
джерело

Ви хочете, щоб якщо одна з них зростала, то інша залишиться такої ж висоти?

— Вай Вонг

Приклад, який не є рішенням, але знаходиться в редагованому середовищі, можна знайти тут: jsfiddle.net/PCJUQ

— MvanGeest

Використовуйте javascript: stackoverflow.com/questions/3275850/…

— C. Заєць,

592

Flexbox

З флексбоком це одна заява:

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

Розгорніть фрагмент

Префікси можуть знадобитися для старих браузерів, див. Підтримку браузера .

— Павло
джерело

17

флексбокс працював як шарм. Якщо ви розробляєте чуйний дизайн і хочете, щоб ваш другий дів знизився на менших екранах, вам потрібно буде встановити .row для відображення: block; у вашому медіа-запиті.

— Нік Зулу

7

@NickZulu Я вважаю, що у цьому випадку вам слід встановити flex-direction: column: jsfiddle.net/sdsgW/1

— Павло

1

@Eckstein це не потрібно для обох рішень. Дивіться демонстрацію.

— Павло

3

це не спрацювало для мене, поки я не додав висоту: 100%; до стовпців для дітей

— Яків Раккуя

1

Чи можна змусити одного конкретного дитячого діва визначити висоту іншого? Так що, якщо зміст іншого дочірнього діва змінюється, він не може змінити висоту цього конкретного діва

— Нарек Малхасян

149

Це поширена проблема, з якою стикалися багато людей, але, на щастя, деякі розумні розуми, такі як Ед Еліот у своєму блозі , розмістили свої рішення в Інтернеті.

В основному те, що ви робите, - зробити обидва диски / стовпці дуже високими, додавши а, padding-bottom: 100%а потім "обманюйте браузер", думаючи, що вони не такі високі, як використовувати margin-bottom: -100%. Це краще пояснив Ед Еліот у своєму блозі, який також містить багато прикладів.

.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

Пояснення на одному вірному макеті було трохи поганим, але після перевірки першого посилання я його добре реалізував на одному з використаних прикладів. Однак це дуже погано, оскільки вам потрібно використовувати зображення для представлення нижньої межі стовпців, і це сумнівно для підтримки крос-браузера. Однак він працює, і він не покладається на JavaScript, тому я буду відмічати його як правильний. Дякую!

— NibblyPig

Схоже, це не працює в старих браузерах IE (так, на жаль, я все ще маю підтримку IE6). Будь-який спосіб зробити це сумісним?

— strongriley

1

@strongriley Checkout Блог Ед Еліота: ejeliot.com/blog/61 Це має працювати в IE6. Можливо, проблема викликана в іншому місці?

— mqchen

1

Це руйнується, якщо вікно занадто вузьке і значки розміщені один під одним.

— WhyNotHugo

1

Як ви визначаєте прокладку комірок, яку ви насправді хочете представити у комірці таблиці, наприклад padding: 7px 10px, якщо для padding-bottomвластивості встановлено 100%? (PS overflow:hiddenмені також потрібен був row)

— user1063287

55

Це область, де CSS ніколи насправді не мав жодних рішень - ви не використовуєте <table>теги (або підробляєте їх за допомогою display:table*значень CSS ), оскільки це єдине місце, де було реалізовано «зберігати купу елементів однакової висоти».

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

Це працює у всіх версіях Firefox, Chrome та Safari, Opera як мінімум з версії 8, а в IE - з версії 8.

— Пол Д. Уейт
джерело

5

Це рішення недоступне для тих, хто потребує підтримки IE6 / IE7, але я вважаю, що це найчистіше.

— twsaef

2

ця відповідь досконала! лише невеличке нагадування: може статися, що хтось із клієнтів вимагає "таблицю" замість "таблиці-рядок"

— tiborka

@ user2025810: aw, дякую Чи знаєте ви, яких клієнтів вимагають tableзамість table-row?

— Пол Д. Уейт

@ user2025810: поступається, не можу сказати, що я колись тестувався на цьому :) Приємно знати, привіт. (Враховуючи його фокус на PDF, я думаю, що він підтримує деякі функції, пов'язані з друком CSS 2.1, які не дуже добре реалізовані в браузерах.)

— Пол Д. Уайт

7

За допомогою цього рішення - забудьте використовувати відсоток widthдля дівок, якщо ви не додасте display: tableбатьківський елемент, який зіпсує речі.

— Алекс Г

42

Використання jQuery

Використовуючи jQuery, ви можете це зробити у надзвичайно простому однорядковому сценарії.

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

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

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

Використання CSS

Це трохи цікавіше. Методика називається Faux Column . Більш-менш ви фактично не встановлюєте фактичну висоту такою самою, але обробляєте деякі графічні елементи, щоб вони виглядали однаковою висотою.

— Дерек Адаїр
джерело

Я думаю, що використання JavaScript - це дуже хороший метод. Проблема полягає в тому, що вона розпадається, якщо її відключити. Думаю, я все-таки використаю це і будую найкращий, що можу; -) Дякую!

— nicorellius

13

Це означає, що висота стовпцяOne завжди більша, ніж колона Два.

— Sébastien Richer

1

Ви повинні порівняти висоту стовпців, перш ніж застосовувати висоту для них. Я думаю, що js - найкращий метод для цієї проблеми, майже всі веб-переглядачі увімкнено js, якщо ні, вони повинні вийти з вашого веб-сайту та багатьох інших веб-сайтів.

— SalmanShariati

6

Це також буде працювати лише при першому завантаженні сторінки. Якщо потім змінити розмір вікна, що призведе до зміни розмірів

— divs,

16

Я здивований, що ніхто не згадав про (дуже стару, але надійну) техніку абсолютних стовпців: http://24ways.org/2008/absolute- Column/

На мою думку, він набагато перевершує як Колони зі штучним світлом, так і техніку One True Layout.

Загальна ідея полягає в тому, що елемент з position: absolute;will позиціонує проти найближчого батьківського елемента, який є position: relative;. Потім ви розтягуєте стовпець, щоб заповнити висоту 100%, призначивши як top: 0px;і bottom: 0px;(або будь-які пікселі / відсотки, які вам потрібні.) Ось приклад:

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

Якщо правий стовпець має більше рядків, ніж лівий, вміст переповнюється.

— Девід

11

Ви можете використовувати плагін рівних висот Jquery для досягнення цих плагінів, ці плагіни роблять усі діви точно такої ж висоти, що й інші. Якщо одна з них росте, а інша теж зростатиме.

Ось зразок реалізації

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.

Ось посилання

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

— Старкс
джерело

8

Ви можете використовувати Faux Column .

В основному він використовує фонове зображення, що містить DIV, щоб імітувати два DIV з однаковою висотою. Використання цієї методики також дозволяє додавати тіні, закруглені кути, власні бордюри або інші прикольні візерунки до контейнерів.

Однак працює лише з коробочками фіксованої ширини.

Добре випробуваний і правильно працює в кожному браузері.

— Арве Систад
джерело

7

Щойно помітив цю нитку під час пошуку саме цієї відповіді. Щойно я зробив невелику функцію jQuery, сподіваюся, це допомагає, працює як шарм:

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

Я використовував externalHeight для включення прокладки та бордюрів. Це найчистіше рішення, на який я думаю.

— Sébastien Richer

Ідеальне рішення, яке я шукав. Інші рішення хороші для випадку, якщо рядок має кілька стовпців, але такий підхід кращий для складного вмісту html. Невелике додавання: Коли розмір документа на чуйній сторінці, висота вмісту не змінюється через фіксовану. Отже, я додав $ ('. Внутрішній'). Css ({висота: "початковий"}); перед "кожною функцією", щоб встановити висоту за замовчуванням.

— бафсар

5

CSS-сітка

Сучасний спосіб зробити це (що також дозволяє уникнути необхідності оголошення- <div class="row"></div>обшивки навколо кожного двох елементів) полягає у використанні сітки CSS. Це також дозволяє легко контролювати прогалини між рядками / стовпцями елементів.

.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

Це запитання було задано ще 6 років тому, але на сьогоднішній день все ще варто дати просту відповідь з розкладкою flexbox .

Просто додайте наступний CSS до батька <div>, він спрацює.

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

Перші два рядки заявляють, що він відображатиметься як flexbox. І flex-direction: rowповідомляє браузерам, що його діти будуть відображатися у стовпцях. І align-items: stretchбуде відповідати вимозі, що всі дочірні елементи будуть розтягуватися на однакову висоту, коли один з них стане вище.

— Хегвін
джерело

1

@TylerH Але запитаний відредагував своє запитання і додав,

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.

що не згадується у прийнятій відповіді ... Я щойно зробив тут завершення. Можливо, я мав би прокоментувати це прийнятою відповіддю?

— Хегвін

1

це не згадується прямо, оскільки воно вже охоплене простим CSS-декларацією. Відкрийте фрагмент відповіді на повноекранному екрані та змініть розмір вікна веб-переглядача; вони залишаються однаковими за розміром.

— TylerH

1

Навіть якщо у прийнятій відповіді використовується флексбокс, цей має інший підхід. align-items: stretch - це те, що поставило мене на шляху до вирішення моєї проблеми в дуже конкретній ситуації.

— BenoitLussier

Чи не align-items: stretch;за замовчуванням flex?

— madav

3

Використання CSS Flexbox та мінімальної висоти працювали на мене

Скажімо, у вас є контейнер з двома дивами всередині, і ви хочете, щоб вони мали дві однакові висоти.

Ви встановите " display: flex " на контейнер, а також " align-items: stretch "

Тоді просто дайте дитині діви " мінімальний зріст " 100%

Дивіться код нижче

.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
джерело

2

Якщо ви не заперечуєте, щоб один з divs був майстром і диктував висоту для обох divs, ось це:

Скрипка

Незважаючи ні на що, divправоруч буде розширюватися або стискатись і переповнюватися відповідно до висоти divзліва.

Обидва divs повинні бути безпосередніми дітьми контейнера і повинні вказувати їх ширину в ньому.

Відповідна 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;
}

— Хешброн
джерело

2

Мені подобається використовувати псевдоелементи для досягнення цього. Ви можете використовувати його як тло вмісту та дозволяти їм заповнити простір.

За допомогою такого підходу ви можете встановлювати поля між стовпцями, рамками тощо.

.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

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
джерело

1

Я спробував майже всі згадані вище методи, але рішення flexbox не працюватиме належним чином із Safari, і методи компонування сітки не працюватимуть правильно зі старими версіями IE.

Це рішення підходить для всіх екранів і є сумісним для браузера:

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

Вищеописаний метод дорівнюватиме висоті комірок, і для менших екранів, таких як мобільний або планшетний, ми можемо використовувати @mediaметод, згаданий вище.

— Джодішоп
джерело

0

ви можете використовувати 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>

Вам потрібно буде включити jQuery

— піксель-код
джерело

1

Це не спрацює, якщо обидва <div>мають динамічний контент. Я вважаю, що якщо <div class="right">є більше вмісту, то виникає інша проблема.

— Суря

0

Я знаю, що це було давно, але я все-таки поділяюся своїм рішенням. Це трюк 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>

--- РІК

<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

Це плагін jQuery, який встановлює рівну висоту для всіх елементів у тому ж рядку (перевіряючи елемент offset.top). Отже, якщо ваш масив jQuery містить елементи з більш ніж одного рядка (різний офсет.top), кожен рядок матиме окрему висоту на основі елемента з максимальною висотою для цього рядка.

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

    });

— tcao
джерело

1

Будь ласка, надайте будь-який коментар до вашої відповіді.

— sgnsajgon

-2

У мене була така ж проблема, тому я створив цю маленьку функцію за допомогою jquery, оскільки jquery є частиною кожного веб-додатку в наш час.

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

Ви можете зателефонувати на цю функцію на події, готовій до сторінки

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

Я сподіваюся, що це працює для вас.

— Майстер-програміст
джерело

-3

Нещодавно я натрапив на це і мені не дуже подобалися рішення, тому я спробував експериментувати.

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

— tushar747
джерело

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

Що я тут зробив, - це змінити висоту на мінімальну висоту і надати їй фіксовану величину. якщо одна з них має розмір, інша залишиться на тій же висоті. не впевнений, що це те, що ти хочеш

— Вай Вонг
джерело

ОП хотіла, щоб діви завжди мали однакову висоту.

— Саймон Форсберг

Як я можу зберегти дві бічні сторони однакової висоти?

Flexbox

Використання jQuery

Використання CSS

CSS-сітка

Використання CSS Flexbox та мінімальної висоти працювали на мене