Eliminate extra space when using @media print {body *{visibility: hidden;}}

Question

I have a modal with a print button on it. When someone hits that print button I'm using

@media print {
  body * {
    visibility: hidden;
  }

to hide the stuff I don't want to print and then using "visibility: visible" on the things I do want printed.

It works great UNLESS someone has scrolled down some before launching the modal. In that case, it adds the amount one has scrolled down to the top of the printed page. Is there a way to eliminate that extra space?

Thank you in advance.

Answer 1

@media print{
   body{display:block; height:100%}
   #banner, .hideForPrint{display:none}
}