A4 blank body element prints on 2 pages

Question

Demo:

print() 

 @page { size: A4 landscape; margin: 0; } html, body { margin: 0; } html { background: cyan; } body { width: 297mm; height: 210mm; background: red; } 

The dimensions for the A4 landscape are correct, but the print overflows to the second page. This happens in Win 10 Chrome 63, FF 52, and Edge 41.

When I use portrait sizes and print A4 Portrait, then only one page prints, as expected, without overflow.

Does anyone have clues to this problem? Does this happen on every platform?

Thank you in advance

Answer 1

used body {margin-top: -1px }

 print() 

 @page { size: A4 landscape; margin: 0; } html, body { margin: 0; } html { background: cyan; } body { width: 297mm; height: 210mm; background: red; margin-top: -1px; } 

Answer 2

link to this solution: HTML:

 <div class="book"> <div class="page"> <div class="subpage">Page 1</div> </div> </div> 

CSS

  body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { /*width: 210mm; min-height: 297mm;*/ width:297mm; min-height:210mm; padding: 20mm; margin: 10mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red solid; height: 257mm; outline: 2cm #FFEAEA solid; } @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } 

JS:

 window.print(); 

Answer 3

Try

 body { margin-top: -1px; } 

It may not work, but this is my best guess.