Buongiorno, ho un problema con la stampa di una pagina HTML dinamica.
Questa contiene al suo interno dei div ( ognuno dei quali corrisponderà ad una pagina fisica quando stampata ) che vengono creati dinamicamente ed ognuno dei quali ha margini di pagina diversi ( configurabili da utente ).

Per fare ciò ho impostato a css la regola @page con margin a 0 e sfrutto un border trasparente sui div per fare il margine.
Il problema è che quando stampo mi crea 2 pagine per ogni div: 1 per il contenuto ed 1 per il solo border bottom.

Ho creato questa pagina di esempio con i bordi in verde per far capire il problema:
codice:
<!DOCTYPE html>
<html>
   <head>
      <style>
         @page LandscapeA4 {
            size: A4 landscape;
            margin: 0 !important;
         }
         
         html,
         body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
         }
         
         /* for print rules: border will be used as page margin */
         .page{
            page: LandscapeA4;
            width: 297mm;
            height: 210mm;
            page-break-after: always;
         }
         
         /* page rules */
         .page{
            position: relative;
            box-sizing: border-box;
            background: #FFF;
         }
      </style>
   </head>
   <body>
      <div class = "page" style = "border: 5mm solid #A5D6A7;">
         Pagina di esempio 1
      </div>
      <div class = "page" style = "border: 10mm solid #A5D6A7;">
         Pagina di esempio 2
      </div>
   </body>
</html>
Ho visto che togliendo all'altezza della pagina 1px il problema si risolve, ma, stampando in pdf, effettivamente manca 1px al bottom della pagina:
codice:
.page{
   height: calc( 210mm - 1px );
}

Non capisco dove sbaglio o come posso risolvere il problema. Qualche suggerimento?
Grazie in anticipo