Javascript - table within scrolling div

So I've got a table within a scrolling div. Right now, I resize the div every time the window is resized to allow the user to see as much of the table as possible.

function resizeTable() {
    document.get开发者_StackOverflowElementById('table-container').style.height = 
        (window.innerHeight-60)+'px';
};

The only issue is that sometimes the table height becomes smaller than the encompassing div so I get some wasted space at the bottom. So what I would like to have is for the div to resize to the window height unless the height of the table is less than the window height. I've tried this...

function resizeTable() {
    var tableContainer = document.getElementById('table-container');
    var table = tableContainer.childNodes[0];
    if (table.offsetHeight < (window.innerHeight-60)) 
        { tableContainer.style.height = table.offsetHeight; }
    else 
        { tableContainer.style.height = (window.innerHeight-60)+'px'; }
};

...but it doesn't work right and cuts off more and more of the table as the window is resized over time. So I come to you for help.

Try using style.maxHeight instead of style.height.