css - How to make HTML pages print at a consistent size from Chrome? -

i'm designing set of html pages printed, , want elements of pages end same scale each other. example, there's class of div width defined 200px wide appears on each of several pages. want appear precisely same size when each page printed (suitable for, e.g., cutting out , superimposing).

i'm using few things work best in chrome (mainly css zoom rule have smaller copies of elements elsewhere), ideally i'd keep using chrome. (this easier in firefox, because has explicit scale ratio in print dialog.) seems on chrome, keeping same element consistent size when printed different pages far easy.

chrome's pdf generation (which printing chrome under hood) appears pick section define page's width, , scale rest of page based on that. or perhaps tries set page size fit "optimal" number of elements on 1 page. if outside framing elements of each page aren't same size in cases, seems elements screen size 200px can come out 3-4 cm down 1.5-2cm or maybe smaller.

just using @page size doesn't help: i've got css , it's not making difference:

@media print {   @ page size: 297mm 210mm  } 

does have thoughts how things print out consistent sizes?

one extreme workaround apply make them parts of 1 big html page, , use javascript mark parts parts printed... i'm not sure if that'd work, , it'd rather cleaner keen things on few different pages. there other ideas?

i found solution. key ensure in each document, "logical page" chrome splits elements printing same size. e.g. if 1 document has lots of 200x200px squares , chrome decides group them in rectangle 5x4 print landscape, need make sure chrome print every other consistent document split elements of size 1000x800px.

for documents number of spans or inline-block divs in sequence, suffices have div set chosen width (1100px), , ensure that div occupies full page width in print preview. make sure css contains like:

@media print {     @page {     size: 297mm 210mm; /* landscape */     /* can specify margins here: */     margin: 25mm;     margin-right: 45mm; /* compatibility both a4 , letter */   } } 

if isn't sufficient, putting inside 1 or more divs fixed size (width: 1100px; height: 800px; overflow: hidden;) job, way force chrome split pages want (and therefore keep elements same size when printed).