引导程序：内容填充高度

Question

我已经使用引导程序进行了这种布局

 async Task myTaskAsync();
 vs
 async Task myTask();

内容应始终填写页面，因此我希望获得以下内容：

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>