打印时如何使用 CSS 使 div 占据整个 A4 页面？

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