How can I use CSS to make a div take up an entire A4 page when printing?

Question

I've been messing around with this for hours now and it's driving me nuts. Unless I'm misunderstanding something, this should be straightforward:

div.A4.page {
          width: 200mm;
          height: 287mm;
          margin: 0;
          border: 5mm solid red;
          padding: 0;
      }

An A4 page is 210mm wide and 297mm high. So set to 200mmx287mm with a 5mm border, that should take up the entire page if I do a print preview (set to "print to PDF" with no margins in the print dialog).

However, for some reason it's slightly too small. If I set the border to 10mm, then it seems wide enough but not tall enough.

What's going on here? Am I missing something obvious or is the browser implemenation just bad? (Chromium).

Any help appreciated.

Answer 1

Try setting the box-sizing property to content-box

div.A4.page {
          width: 200mm;
          height: 287mm;
          margin: 0;
          padding: 0;
          border: 5mm solid red;
          box-sizing:content-box;
      }

Or

div.A4.page {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          border: 5mm solid red;
          box-sizing:border-box;
      }

However this may be that your printer options have a set margin by default that you need to remove, most printers leave a margin around the A4 page