UI-grid : How to dynamically control the height of the ui-grid in terms of screen size and number of records for the table?

Question

I am using ui-grid for one of my application as configured below:

HTML:

<div ui-grid="gridOptions" ui-grid-pagination  ui-grid-selection ui-grid-exporter class="myGrid">
                    <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
                </div>

JS:

$scope.gridOptions = {
                enableSelectAll: true,
                exporterCsvFilename: 'AGS_Extract.csv',
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [10, 25, 50, 75],
                paginationPageSize: 10,
                useExternalPagination: true,
                enableGridMenu: true,

.... ... .. .

I am using external pagination and footer plus there is an option for user to move to 10,25,50,75 paginated data which can be a factor for the dynamic height as i consider the scenario plus the screen size.

Scenarios:

1. Currently loading the data of 10 records on a smaller laptop, it takes more than half of the screen, looks okay.
2. As we move to a 15'or 17' laptop or higher resolutions, the table is only shown half of the screen or even less
3. If we go to bigger screens it would again be less than half the screen size viewable
4. Additionally, on change of the dropdown of number of records to be shown from [10,25,50,75] then also the table would auto resize considering the fact the scroll should be present or not if the screen is still available below.

Hope i am clear from the requirement that the table should be dynamic on terms of screensize and number of records viewable and also on change of that dropdown selection also fires a auto resize and the scroll for the table content is controlled wrt screen viewable size.

I had tried several aspects to add the class to deeper levels of grids to alter its height but sometimes the external pagination is unaffected; sometimes the consideration for dynamic height on change of dropdown and scroll control was heading me back.

Some reference answer i took up:

https://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid?answertab=votes#tab-top

Let me know if its unclear in the comments.