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.

Is this what you are looking for? https://stackoverflow.com/questions/20446252/stretch-div-to-a4-size — SeventhWarhawk, Nov 05 '20 at 22:53

score 0 · Answer 1 · answered Nov 05 '20 at 23:07

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

Unfortunately that does not fix the problem. And it is not due to the printer margins as I have the margins turned off (it's an option in the Chromium print dialog) and am printing "to pdf". Thanks for your suggestions though. — Victor Paul Webster, Nov 06 '20 at 06:33

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

1 Answers1