Как автоматически настроить высоту строки в Bootstrap?

Question

Я изучаю Bootstrap и пытаюсь выяснить, как автоматически регулировать высоту строк при следующих условиях:

• В container-liquid * 1005 есть 3 строки*
• row1 должен соответствовать высоте его содержимого
• row3 должен соответствовать высоте его содержимого и находиться в нижней частиviewport
• row2 должен отрегулировать его высоту на расстояние между row1 и row3 , чтобы заполнить контейнер-жидкость

html, body, .container-fluid {
  height: 100%;
  background: lightyellow;
}

.col {
  border: solid 1px #6c757d;
}

.content-1 {
  height: 50px;
  background-color: lightcoral;
}

.content-2 {
  height: 200px;
    background-color: lightgreen;
}

.content-3 {
  height: 25px;
  background-color: lightblue;
}

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-2">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

JSFiddle demo

Каков наилучший подход для этого ?.Заранее спасибо!

Answer 1

Я вижу, что вы используете bootstrap 4. Но любой, кто использует bootstrap 3 или вообще не использует какие-либо библиотеки CSS, тогда решением будет код ниже.

.parent-row{
 display: flex;
}
.children-columns{
  display: flex;
}

Answer 2

Вы ищете служебные классы flexbox.d-flex для display:flex, а flex-grow-1 заставит 2-го дочернего элемента div заполнить оставшуюся высоту.Используйте flex-column для вертикальной разметки.

<div class="container-fluid d-flex flex-column">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row flex-fill">
    <div class="col d-flex flex-column">
      <div class="content-2 h-100">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/IIVJqGJ2qG

Примечание. Фиксированные высоты, установленные в пользовательском CSS, были удалены, чтобы верхний / нижний колонтитулы можно быловысота их содержимого и строка содержимого для заполнения оставшейся высоты.

---

Related:
Bootstrap 4: Как заставить строку растянуть оставшуюся высоту?
Bootstrap - заполнить емкость для жидкости между верхним и нижним колонтитулом