UI网格：如何根据屏幕大小和表格记录数量动态控制ui网格的高度？

Question

我正在使用ui-grid作为我的一个应用程序，如下所示：

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,

.... ... ..

我正在使用外部分页和页脚加上用户可以选择移动到10,25,50,75分页数据，这可以作为动态高度的一个因素，因为我认为场景加上屏幕大小。

方案：

1. 目前在较小的笔记本电脑上加载10条记录的数据，占用屏幕的一半以上，看起来还不错。
2. 当我们转向15英尺或17英寸笔记本电脑或更高分辨率时，该表只显示屏幕的一半甚至更少
3. 如果我们进入更大的屏幕，它将再次不到可见屏幕尺寸的一半
4. 此外，在更改从[10,25,50,75]显示的记录数量的下拉列表时，如果屏幕仍然可用，则表格将自动调整大小，考虑到滚动应该存在的事实下方。

希望我明确要求表格在屏幕大小和可查看记录数量方面应该是动态的，并且在更改下拉列表选项时也会触发自动调整大小，并且可以在屏幕上查看表格内容的滚动大小

我曾尝试过几个方面将类添加到更深层次的网格以改变其高度但有时外部分页不受影响;有时，对于下拉和滚动控制的变化，动态高度的考虑让我回头。

我接受了一些参考答案：

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

如果在评论中不清楚，请告诉我。