Расширить цвет столбцов до нижней части страницы, используя Bootstrap строк контейнеров и столбцов - PullRequest
Новая
       27

Расширить цвет столбцов до нижней части страницы, используя Bootstrap строк контейнеров и столбцов

0 голосов
/ 18 апреля 2020

Я не могу расширить цвет столбца bootstrap до нижней части страницы. Я не хочу устанавливать фиксированную высоту, я хочу, чтобы она доходила до нижней части экрана браузера.

HTML: 

<div class="container">
  <div class="row">
    <div class="col box1">
      Box1
      I need the blue to extend to bottom of page
    </div>
    <div class="col">
      Box2
    </div>
  </div>
</div>

CSS:
.box1 {
  background-color: aqua;
}

JS Скрипка здесь: https://jsfiddle.net/romanbogza/oL3nk8wz/

1 Ответ

1 голос
/ 18 апреля 2020

Для этого вы можете использовать min-vh-100 (min-height: 100vh;) класс. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col box1 min-vh-100 bg-info">
            Box1 I need the blue to extend to bottom of page
        </div>
        <div class="col">
            Box2
        </div>
    </div>
</div>
...