Set number of rows based on not letting the page scroll (jquery)

We have a page with multiple content areas, in one of which we build a table from a result set. The user requirement is that the page not scroll. If we fix the number of rows to now allow scrolling at our preferred screen resolution, it looks great at the preferred resolution, but at lower resolutions the page scrolls. If we fix the number of rows so that the page does not scroll at our lowest supported resolution, we end up with开发者_运维知识库 a lot of wasted space at our preferred resolution. We have done some things with the viewport size (get viewport size, subtract all fixed elements, divide the result by normal row height to calculate number of rows to display), but these do not take into account that some of the rows wrap to be two lines. When that happens, we push down and end up scrolling at lower resolutions. Is there any way to dynamically fill an element with rows until it is full but not go past the point where the element would be forced to scroll?

Keep appending rows, all the while checking $('table').outerHeight() until it's greater than $(window).height(), then delete the last row.

Call this window fitting thing again on window resize events.