Растянуть дочернюю высоту div для заполнения родителя с динамической высотой

Ответ 1

Решение состоит в использовании display: table-cell для приведения этих элементов в строку вместо использования display: inline-block или float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Ответ 2

Используйте display: flex чтобы растянуть ваши div:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Ответ 3

Добавьте следующий CSS:

Для родительского div:

style="display: flex;"

Для дочернего div:

style="align-items: stretch;"

Ответ 4

Лучший вариант для решения этой проблемы - использовать display: flex; с свойством align-items: stretch;. Это похоже на ответ @TrongLamPhan, но он не использовал align-items: stretch.

Изменить: при включении flexbox с display: flex; значение по умолчанию для align-items будет stretch, поэтому вам не нужно добавлять свойство align-items: stretch, потому что это значение по умолчанию. Пойдите, голосуйте, кто-то другой ответит.

Разбивка CSS:

• на parent-div установите display в flex. Это установит режим отображения parent-div на flexbox, который позволяет
• align-items свойство, которое будет использоваться. Установите для этого свойства значение stretch для соответствия растягиванию child-div.

CSS Tricks имеет довольно хорошее руководство по flexbox. Я бы очень рекомендовал обучение flexbox в 2017 году, потому что его очень мощный инструмент компоновки, и он уже давно должен был стабильный во всех основных браузерах.

* {
  font-family: sans-serif;
}

.parent-div {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #ddd;
  display: flex;
  align-items: stretch;
}

.child-div {
  flex: 1; /*this property is only here to make each child the same width*/
  margin: 0.5em;
  padding: 0.5em;
  background-color: #eee;
}

<div class="parent-div">
  <div class="child-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="child-div">This child div should be the same size!</div>
</div>

Ответ 5

https://www.youtube.com/watch?v=jV8B24rSN5o

Я думаю, что вы можете использовать отображение в виде сетки:

.parent { display: grid };

Ответ 6

Вы можете сделать это легко с помощью немного jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});