防止在打印网页的 pdf 时打印白色空页

Question

I used @media query to override css properties of my webpage and create a good-for-me print layout.

But I have a problem: even if what I want to print "stays" entirely inside a single A4 sheet, if I click "print" (no matter if print pdf or normal paper print) it's printed also a white and empty additional sheet.

How to prevent this?

My code:

@media print {
           
      .noPrint{
        display: none;
      }

      section{         
        display:block;   
        background-color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin:0;
        padding: 1em;  

        /*settings */    
        color-adjust: exact !important;  
        -webkit-print-color-adjust: exact !important;
      }

      a{
        display:none;
      }
      button{
        display:none;
      }
      h1{
        font-size: 3vw;
      }
 }

Answer 1

You could use :

page-break-after: auto;

or :

@media print {
    html, body {
        height: 99%;    
    }
}

as mentioned in how to avoid extra blank page at end while printing?

But since I haven't worked with print all that much I can't help anymore than this.