CSS Print layout is adding an extra page

Question

I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:

@page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        height: 296mm;
        border: 1px solid black;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }

.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}

.A4_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 44mm;
    height: 210mm;
    width: 165mm;
 }

I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.

Answer 1

Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.

Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.

Answer 2

Really late answer, but I think my contribute can help someone with the same issue I came across making use of CSS to setup a page for printing:

creating a dynamic html content and appending it to the body element with the purpose to print only such content, I realize that only Chrome (version 46) and Opera (version 32) creates an extra blank page at beginning while printing, this only happened when the content height was greater than the page height. The solution provided by @mewiki solved me a 2-days-of-research-and-test problem.

Indeed Chrome and Opera seemed to have default margins and setting the following rule:

body {
    margin: 0 0 0 0;
}

solved the frustrating behavior which was not encountered in other browsers.