Grow body height relative to Fancybox

Question

I Use Fancybox to display complex forms on an intranet site. The page the Fancybox forms are launched from uses Datatables to filter filter and sort numerous records from the database. When the list is filtered significantly and the Fancybox is loaded, the Fancybox content can exceed the page body. This results in white area where the Fancybox overlay does not show.

In addition to being ugly, you cannot click in this area to close the Fancybox.

What is the best way to grow my page body to at least the height of the Fancybox, either with CSS, Javascript or both?

Thanks!

EDIT: Gov's solution below is correct but does not solve the problem. Actually the height of the Fancybox overlay itself needs to be increased. I'm perceiving this now to be a bug with Fancybox. It seems if the body grows as a result of of the Fancybox size, then the overlay should increase to the body size automatically. I will submit this to the developers. In the meantime if anyone has this issue Gov's code as I have modified it will work:

// Adjust Fancybox Overlay Height to Large Fancyboxes
function overlayHeight() {
  fancyBoxHeight = $('#fancybox-wrap').height(); 
  finalheight = fancyBoxHeight + 300;
  $('#fancybox-overlay').css('height', finalheight);
}

I also want to note that Fancybox is a really great plugin, so this should not be taken to sway from anyone against using it!

Answer 1

I just found that modifying the CSS works.

#fancybox-overlay {
    position: fixed; //I just changed the position to fixed, and voila
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;