Bootstrap: content fill height - html

Question

I have made this layout with bootstrap
<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>
Content should always fill out the page, so I want to get something along the lines of:

Answer 1

Use code as below (run and see in full page):
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>