Bootstrap: высота заполнения контента

Question

Я сделал этот макет с помощью начальной загрузки

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

<div class="container-fluid">
    <div class="row">
      <div class="col-md-2 leftsidebar">left</div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-12 header">header</div>
        </div>
        <div class="row">
          <div class="col-md-12 content">content</div>
        </div>
        <div class="row">
          <div class="col-md-12 footer">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsidebar">right</div>
    </div>
  </div>

Содержание всегда должно заполнять страницу, поэтому я хочу получить что-то вроде:

Answer 1

Используйте код как показано ниже (запустите и посмотрите на полной странице):

    html,body{
        height:100%;
    }
    .leftsidebar{
    background:orange;
    }
    .rightsideba{
    background:green;
    }
    .vh-100{
        height: 100vh!important;
    }
    .footer{
        position: absolute;
        bottom: 0;
        width: 100%;
        background:red;
    }
    .content{
    background:skyblue;
     height: calc(100% - (30px));
    }
    .vw-100{
    width:100vw;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      
     <div class="container-fluid  h-100">
    <div class="row">
      <div class="col-md-2 leftsidebar  vh-100">left</div>
      <div class="col-md-8">
        <div class="row header">
          <div class="col-md-12  h-100">header</div>
        </div>
        <div class="row content">
          <div class="col-md-12">content</div>
        </div>
        <div class="row footer">
          <div class="col-md-12   h-100">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsideba  vh-100 vw-100">right</div>

    </div>