Looking for a way to adjust panel height based on screen size?
<div class="container-fluid">
<!--Heading-->
<div class="row " align="center">
<h1 style="font-family: 'Roboto', sans-serif; font-size: 45px;"> Test Automation Inventory</h1>
</div>
<!--Table-->
<div class="row" >
<div class="col-lg-12 col-md-12">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" ng-click="Reset()"> Add New Test Details</button>
<div class="panel panel-primary">
<div class="panel-heading ">
<h3 class=" panel-title pull-left" style="padding-top:7.5px">Test Automation Inventory</h3>
<div class="input-group">
<input id="Special" type="text" class="form-control" placeholder="Search" autocomplete="off" focus ng-model="FilterItems">
<span class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<!-- style="overflow:auto; height:670px"-->
<div class="panel-body scroll" style="overflow:auto; height:670px">
<table class="table table-striped table-hover">
<tr ng-show="results.length==0">
<td style="vertical-align:middle;">No data found</td>
</tr>
<tr>
<th ng-repeat="c in columns" ng-click="ChangeOrder(c)">{{c.text}}</th>
</tr>
<tr class="animate-repeat" ng-repeat="Res in results | filter:FilterItems | orderBy: Column:reverse ">
<td> {{$index+1}}</td>
<td>{{Res.Test_Inventory_Group}}</td>
<td>{{Res.Test_Inventory_Application}}</td>
<td>{{Res.Test_Inventory_Count}}</td>
<td>
<button class="btn btn-danger">Delete Test</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Is there a way to make the panel height [Window height - 10px] without causing the main page to scroll?
I specifically want only the panel to have a scroll, not the entire page.