У меня есть div, который постоянно меняет высоту. Как я могу получить второй div, чтобы постоянно принимать высоту, в которой находится первый div?

У меня есть div, содержащий список элементов. Пользователь может добавлять / удалять элементы из списка, поэтому div постоянно изменяет высоту, чтобы компенсировать изменение размера списка.

У меня есть другой div справа, который должен предоставить детали о предметах слева. Как я могу заставить div справа постоянно вертикально выравниваться с левым div и изменять высоту так, чтобы он равнялся высоте, на которой находится текущий div, поскольку элементы добавляются и удаляются из списка левого div?

Solutions Collecting From Web of "У меня есть div, который постоянно меняет высоту. Как я могу получить второй div, чтобы постоянно принимать высоту, в которой находится первый div?"

display:table-cell поможет вам:

 div { display:table-cell; border:1px solid; } 
 
one
two
three

Трудно ответить на ваш вопрос, не показывая свой код. Попробуйте положить его в скрипку? https://jsfiddle.net/

Вот что я бы сказал. Поместите ваши левые и правые divs в контейнер div, а затем левой и правой div наследуйте высоту контейнеров.

 
list items
list items
list items
right div


Удалите высоту с обоих из них и оберните div вокруг обоих из них, где вы добавляете высоту.

Эта функция вызывается всякий раз, когда что-то в документе изменяется, и устанавливает высоту div2 в значение для высоты div1

  

Решение Flexbox

Этот ответ адаптирован из примера на css-трюках – проверьте его

Предполагая следующую разметку:

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

в

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Мы можем создать flexbox, который заставит все столбцы соответствовать высоте самого большого со следующими стилями:

 .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; font-weight: bold; text-align: center; } .wrapper > * { padding: 10px; flex: 1 100%; } .main { text-align: left; background: deepskyblue; order: 2; flex: 3 0px; } .aside { background: gold; max-width: 200px; order: 1; } body { padding: 2em; } 

Вот скрипка

ПРИМЕЧАНИЕ. Поддержка браузера для этого решения ограничена IE10 +, а использование префиксов браузера по-прежнему применяется к большинству версий основных браузеров. Для более детальной разбивки того, как работает flexbox, я настоятельно рекомендую вам ознакомиться с приведенной выше статьей.