Html 旋转（90度）isn'；t打印友好

我正在制作一个包含A4横向和纵向页面的网站，如下图所示：

当我尝试打印时，效果不好。 因此，我添加了一个CSS以将肖像页面旋转90度：

.page {
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;
      border: 5px #ccc solid;
      height: 296mm;
      width: 210mm;   
      outline: 2cm whitesmoke solid;

      background: white;
      margin: 1mm auto;
      position: relative;

 } 


.landscape {
      position: relative;
      width: 296mm;
      height: 210mm;
      margin: 1mm auto;
      margin-top : 180px;
      margin-bottom : 180px;
      background: white;

      outline: 2cm whitesmoke solid;
      border: 5px #ccc solid;           
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;     
}



@media print {
.rotate_print{
    transform: rotate(90deg);
}    

    .page {
        page-break-before: always;        
        margin : 0mm;            
        padding : 1cm;        
        outline: 0;
        border: 0px;        
    }

    .landscape {
        page-break-before: always;    
        margin : 0mm;   
        padding : 1cm; 
        outline: 0;
        border: 0px;        
    }

    .no-print {
        display: none;
    }
 }

页面已旋转，但它会在旋转页面和正常页面之间创建一些较大的空间：

如果打印不正确，旋转后的页面仍有问题，如下图所示。如何正确使用旋转变换打印网页

我尝试将位置更改为“相对”，并尝试将页面移近，但问题仍然存在。我还尝试将打印机设置更改为0边距。在Safari和Chrome上试用过

---

Dennis的解决方案适用于Chrome和Safari上的风景和肖像页面

名为内部分页符和内部分页符的属性可用于停止拆分页面

@media print{
   .page{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
   .landscape{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
}