Bootstrap: высота col-sm

Question

Имеется три столбца col-sm, и у них закрашен background. Но background закрашивается только в случае заполнения col-sm`a. Как сделать чтобы все три столбца были 100% высоты и т.о. полностью заполняли пространство страницы?

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="background-color: aquamarine;">
      <p class="text-center" style="padding-top:10px;">Вызовы клиентов</p>
      <table class="table table-borderless">
        <tr>
          <th class="text-center" scope="col">[email protected]</th>
        </tr>
        <tr>
          <th class="text-center" scope="col">[email protected]</th>
        </tr>
        <tr>
          <th class="text-center" scope="col">[email protected]</th>
        </tr>
        <tr>
          <th class="text-center" scope="col">[email protected]</th>
        </tr>
      </table>
    </div>
    <div class="col-sm" style="background-color: khaki;">
      <p class="text-center" style="padding-top:10px;">Клиенты в чате с поддержкой</p>
    </div>
    <div class="col-sm" style="background-color: lavender;">
      <p class="text-center" style="padding-top:10px;">Все клиенты</p>
    </div>
  </div>

Answer 1

Если вы хотите чтобы их высота была равна высоте экрана, то можно задать min-height: 100vh;

БЛОГ НА HUSL

Bootstrap: высота col-sm

Ответы (1 шт):