grids showing full page when the height is set to 100% - html

Question

Since some time I have been working on a chat room layout and the main concept of my website (Which i'll be showing) is that I have a fixed navbar and a fixed bottom footer (Bootstrap 4). So between them I added a grid system with 3 columns (3 + 6 + 3) Now I want the grid system to be the height so it covers the whole area between the navbar and the footer. But the problem is when I give them the height of 100% a scrollbar comes up and makes it a full page grid.
My Code :
.dropdown-toggle::after {
content: none;
}
body {
margin: 0;
padding: 0;
}
<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"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row no-gutter" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>

Answer 1

Use calc() to calculate the height of a element:
<style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
</style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"
style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full_height">
<div class="row no-gutter text-center" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;color:white;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
codepen link

Answer 2

Use CSS flex. Giving height 100% will take all the height inherits from its parent. here you are trying to set the content height to 100%. So it takes all height available and there is no space for header and footer. If you try to include header and footer with the content then the page gets overflow. So the scroll comes.
body{
margin:0;
padding:0;
display:flex;
height: 100%;
position: absolute;
width: 100%;
flex-direction:column;
}
.row.no-gutter {
flex: 1;
overflow: auto;
margin: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25" style="margin-top:10px;margin-right:15px;"/>
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25" style="margin-top:10px;margin-right:15px;"/>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row no-gutter" >
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>