Полная высота страницы для "выбора" через Bootstrap 4. Как получить просмотр страницы на изображении 2?

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-primary">
    <div class="navbar-brand mr-auto">Brand</div>
    <div class="navbar-brand">Site</div>
    <button type="button" class="ml-auto btn btn-success">Login</button>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-3 table-success">
            111<br>
            222
        </div>
        <div class="col-9 table-warning">
            111 222<br>
            333 444<br>
            555 666
        </div>
    </div>
    <div class="row">
        <div class="col-3 table-danger">
            <div class="form-group">
                <label class="input-group-text">Title</label>
                <select multiple class="form-control">
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                </select>
            </div>
        </div>
    </div>
</div>

Как растянуть div (class = "col-3 table-dangerous") в конец страницы? А как растянуть select (class = "form-control") до низа страницы с учетом отступов и полей?

Свойство «h-100» не работает, так как «select» выходит за пределы граница страницы внизу или не растянута.

У меня такая страница (просмотр страницы). (изображение 1)

Как получить такую ​​страницу (просмотр страницы)? (изображение 2)

Answer 1

Есть как минимум два способа сделать это.

1. Абсолютно позиционировать элемент select.
2. Используйте flex-grow-1, чтобы он занимал все доступное пространство. Я думаю, что это лучшее решение, потому что оно не требует фиксированного размера блока.

---

flex-grow

Свойство flex-grow CSS устанавливает коэффициент увеличения гибкости для основного размера гибкого элемента. Он указывает, какая часть оставшегося пространства в гибком контейнере должна быть назначена элементу (коэффициент роста гибкости).

https://developer.mozilla.org

• Все родительские элементы элемента select должны занять все доступное пространство. Если это единственный ребенок, он должен иметь 100% рост.

• Используйте d-flex для всего его родительского контейнера, включая тело, но не HTML.

• Используйте flex-column для всего родительского контейнера. они содержат более одного элемента.
• Используйте flex-grow-1 для всех его родительских элементов, кроме HTMl.
• Используйте flex-grow-1 тоже на себе.

html,
body {
  height: 100%
}

body {
  display: flex;
  flex-direction: column;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-primary">
  <div class="navbar-brand mr-auto">Brand</div>
  <div class="navbar-brand">Site</div>
  <button type="button" class="ml-auto btn btn-success">Login</button>
</nav>

<div class="container-fluid d-flex flex-column flex-grow-1">
  <div class="row">
    <div class="col-3 table-success">
      111<br> 222
    </div>
    <div class="col-9 table-warning">
      111 222<br> 333 444<br> 555 666
    </div>
  </div>
  <div class="row flex-grow-1">
    <div class="col-3 d-flex flex-column table-danger form-group">
      <label class="input-group-text">Title</label>
      <select multiple class="form-control flex-grow-1">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
    </div>
  </div>
</div>