I have implemented Bootstrap tabs on my webpage and I am looking to extend the height of the tab content to fill the remaining space (stretching it to the bottom). The layout includes a header followed by the tabs, with the header having varying heights. Due to this, using 'calc' in CSS for the tab content is not feasible. I'm exploring options to achieve this using height: 100%. Below is the code snippet I have been working on. When I apply h-100, equivalent to CSS height: 100, a scroll bar appears which is undesirable.
Here is the code:
html,
body {
height: 100%;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100">
<div class="row bg-primary">
<div class="col">
<p>Here is going to be some content. Height of this content is auto it can change based on what it has inside.</p>
<p>For instance two paragraphs.</p>
</div>
</div>
<div class="row mt-2 bg-warning h-100">
<div class="col h-100">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="tab1-nav" data-toggle="tab" href="#tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Tab 1</a>
<a class="nav-item nav-link" id="tab2-nav" data-toggle="tab" href="#tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Tab 2</a>
</div>
<div class="tab-content h-100 border border-top-0 mb-2 p-2" id="nav-tabContent">
<div class="tab-pane show active" id="tab1" role="tabpanel" aria-labelledby="nav-tab1">
<div class="row h-100">
<div class="col">
Content 1
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="nav-tab2">
<div class="row">
<div class="col">
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
<h1>Content tab 2</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>