CSS Print layout is adding an extra page - css

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.

Answer 3

Old question, but for people with the same problem here is my solution that fixed it for me.
I found out that the margin-bottom of the body must be set explicitly to zero (Chrome and Safari seem to have a default margin).
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 to be printed page start with a <div class="page"> and set the page margins there so the page looks nice.

Answer 4

So because 27.9cm turns into something like 1423.03px I suspect it's causing the print renderer to display an additional pixel. Adding this to my page fixed the issue.
.page-a4 {
width: 21cm;
height: calc(27.9cm - 1px);
}

Answer 5

For anyone dealing with multiple pages. I added each page content in sections then used this:
section {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}

Answer 6

I had a similar problem where the introduction of a page break caused a blank page.
I don't have enough reputation to comment on wiredolphin's post, but using that suggestion, the following worked for me
html, body {
margin: 0 0 0 0;
height: 99% !important;
}
.page {
height: 100vh;
page-break-after: always;
}
I know this doesn't answer the original poster's question, but it's pretty old, and this might help someone.
Also, thanks wiredolphin! You led me in the right direction.

Answer 7

#page {
size: auto; /* auto is the initial value */
margin: 12px; /* this affects the margin in the printer settings */
}

Answer 8

I was facing the same issue and Neograph734's answer gave me an important hint.
I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
*
{
box-sizing: border-box;
}
Then I no longer need to worry about having an extra pixel added when using margin, padding or border.
Once I've added that rule, I only had to adjust the boxes positions and everything worked flawlessly.