CSS print layout adds an extra page

Question

I am working on a print page for a client. After playing for a while, I found myself getting an extra blank page. Unusually, if I select “Block Element Level Elements” in the web developer for chrome, the sub page disappears. These are all the CSS that is being used on this 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 have done a lot of search queries, but I do not see anything related to this. At the border of the body, the end of the div is clearly displayed until the end of the first page, however for some reason I still get an extra blank page.

Answer 1

Maybe there is something adding only 1 pixel? Since you are defining a page to use a full height of 270 mm. Even a single margin / padding / border field will add a new page.

Does this happen if you decrease this value? If not, then I suggest you drop this value a bit (you still don't use full height). You can add page-break: after to .print_A4 so that the next page does not take up little space on the previous page.

Answer 2

The answer is really late, but I think that my contribution can help someone with the same problem that I encountered using CSS to adjust the page for printing:

creating dynamic html content and adding it to the body element in order to print only such content, I understand that only Chrome (version 46) and Opera (version 32) create an additional blank page when printing starts only when the height of the content was greater than the height of the page. The solution provided by @mewiki solved me the problem with two days of research and testing.

In fact, Chrome and Opera appear to have default fields and set the following rule:

 body { margin: 0 0 0 0; } 

resolved frustrating behavior that did not occur in other browsers.

Answer 3

Old question, but for people with the same problem, here is my solution that fixed this for me.

I found out that the edge of the lower body should be explicitly set to zero (Chrome and Safari seem to have a default).

 body { margin: 0px 0px 0px 0px; } div.page { margin: 10px 10px 10px 10px; page-break-before: none; page-break-after: none; page-break-inside: avoid; } 

For each print page, start with <div class="page"> and set the page margins to make the page look good.

Answer 4

I had a similar problem when introducing a page break resulted in a blank page.

I don't have enough reputation to comment on a wiredolphin post, but using this suggestion the following helped me

 html, body { margin: 0 0 0 0; height: 99% !important; } .page { height: 100vh; page-break-after: always; } 

I know that this does not answer the original question of the poster, but it is quite old, and this can help someone.

Also thanks wiredolphin! You led me in the right direction.

Answer 5

For those who deal with multiple pages. I added each page content to sections, and then used this:

 section { margin: 0; width: 100vw; height: 100vh; overflow: hidden; }