Using vh units with scrollY

Hello,

I would like to use vh units with scrollY in order for my datatable to fill up the screen regardless of the user's screen size. However, when I try this, I get a strange result upon the very first load (I am using server-side processing, and the data immediately loads upon page load). Specifically, the data only fills up to about halfway down the table, and then no more rows are loaded. But I know for a fact that hundreds of rows should be loading, and therefore the visible table should be completely filled with data (it works properly when I use px units for scrollY). But then, upon subsequent data loads, the data populates the table fully, as expected.

Here is my datatable code:

    var dtRecords = $('#tblRecords')
        .on('error.dt', function (e, settings, techNote, message) {
            console.log('An error.dt event has occurred.');
            try {
                throw (new Error(message));
            }
            catch (err) {
                HandleError(true, 'From error.dt: ' + err.stack);
            }
            finally {
                return false;
            }
        })
        .DataTable({
            dom: 'BtSir',
            serverSide: true,
            ajax: {
                url: "MktSegIndService1.asmx/LoadRecords",
                type: "POST",
                dataType: "json",
                data: function(d){
                    d.isTextSearch = isTextSearch;
                },
                error: function (xhr, status, error) {
                    HandleError(false, 'From DataTables AJAX error section: ' + error);
                }
            },
            columns: [
                { data: "ORIGINAL", className: "colOrig" },
                { data: "CHILD" },
                { data: "MarketSegment", className: "mktSeg" },
                { data: "SIC", className: "sic" },
                { data: "PARENT" },
                { data: "ULTIMATE" },
                { data: "State" },
                { data: "Country" },
            ],
            keys: {
                blurable: false
            },
            buttons: {
                buttons: [
                    {
                        text: 'Copy',
                        key: {
                            key: 'c',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('copy action!');
                            try{
                                var copiedCell = dt.cell({ row: focusedRowIdx, column: focusedColIdx });
                                copiedCellData = copiedCell.data();
                            }
                            catch (err){
                                HandleError(true, "From Copy action: " + err.stack);
                            }
                        }
                    },
                    {
                        text: 'Paste',
                        key: {
                            key: 'v',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('paste action!');
                            try{
                                var field = dt.column(focusedColIdx).dataSrc();
                                if (field === "MarketSegment" || field === "SIC") {
                                    alert("CopiedCellData = " + copiedCellData);
                                    editorObj
                                        .edit(focusedRowIdx, false)
                                        .set(field, copiedCellData)
                                        .submit();
                                } else return false;
                            } catch (err) {
                                HandleError(true, "From Paste action: " + err.stack);
                            }
                        }
                    }
                ]
            },
            scroller: {
                displayBuffer: 15
                ,
                loadingIndicator: true
            },
            //deferRender: true, // Don't need this with server-side processing
            colReorder: {
                realtime: false
            },
            scrollX: true,
            scrollY: "80vh",
            scrollCollapse: true,
            searching: false,
            ordering: false,
            processing: false,
            info: false,
            rowId: "Row",
            select: true
        });