Inexplicable empty space on print from Chrome

Question

Chrome (and other WebKit rendering engines) generate seemingly inexplicable whitespace on print. Code is in CodePen link but easier to explain with pictures:

---

ACTUAL results on print from chrome (screenshot of print view):

Also, it does seem OL with "Default" margins set, but I don't understand the behavior without them, "default":

---

@page {
   size: 320mm 120mm;
   margin: 10mm;
   padding: 0;
   border: none;
   border-collapse: collapse; 
}

http://codepen.io/anon/pen/obqLyy

Another example of random whitespace (full html, can copy directly into notepad or whatever): http://pastebin.com/wUXsqWae

If the question seems vague, it's: "Why is there whitespace on the bottom and the right of the image when trying to print with no margins?"

Edit: So, I tested a bit, and it seems that elements don't cover the body entirely, the borders are NOT behaving as expected given the box model:

This almost solves my problem, but I have seen the issue with border-collapse before - I have no idea what it's doing here and would love to know.

Edit: Restarted my computer, now the extra body space in the last image is on the right instead of the bottom. This is pretty silly.

Answer 1

An explanation to the borders appearing:

• Your div is 280mm x 80mm in size. The proportion (280/80) is 3.5.
• Your page is 320mm x 120mm in size. The proportion (320/120) is 2.67.

When you ask Chrome to remove the margins from your page, you end up with a div with the same size and proportions (3.5) and a scaled down page that attempts to fit the div in, but the size of the page is still of a 2.67 proportion. This explains the margins that magically appear.

I'm working on a way to solve this right now, but this should set you on the right track. Good luck!

Update

Rather read update #2.

Created a pastebin applying what I explained up there: http://pastebin.com/48RqpBFV I added 1mm to your page size (now it's 102mm) because: Body size: 99/74 = 1,33784 But page size: 101/ 76 =/= 1,33784 Adding this 1mm to your page width fixed the borders.

Update #2

http://pastebin.com/Dq837cXp Final pastebin with your second model. I used the following fixes:

@page {
   size: 101.6mm 76mm;
   padding: 0;
   margin:1mm;
   border: none;
   border-collapse: collapse;
}

And added max-height:100%; to .reportBody. It's surprising that you can actually add more digits to millimiters. 101.6mm makes it exactly the proportions you want it to be, and max-height:100%; prevents Chrome from making another page.

Answer 2

I adjusted the size of the .reportTable by a couple of mm and the extra whitespace was eliminated from the print preview in Chrome.

Before:

After:

.reportTable {
    width: 99mm; /* was 97mm */
    height: 74mm; /* was 72mm */
    padding: 0;
    margin: 0;
    border: 1mm solid;
    border-collapse: collapse;
    background-color:red;
}

It looks like the table was not taking up the whole area that was set by the body and the extra space was being made visible by the browser. Perhaps a Chrome feature?