Имеется три столбца 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">fedotov@mail.ru</th>
</tr>
<tr>
<th class="text-center" scope="col">meshkov@mail.ru</th>
</tr>
<tr>
<th class="text-center" scope="col">meshalkin@mail.ru</th>
</tr>
<tr>
<th class="text-center" scope="col">zamaliev@mail.ru</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>