A4 사이즈로 페이지 인쇄하기

브라우저(익스, 크롬)마다 사이즈며 여백 등이 제각각 (제 맘대로 브라우저 두 개만 맞춤..)

 

HTML

(html, header, body 형식은 생략합니다~~)

<div class="page">
  <div class="subpage">인쇄영역!!</div>
</div>

 

CSS

body {margin: 0;padding: 0;}
* {box-sizing: border-box;-moz-box-sizing: border-box;}
.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 0 auto;
  background:#eee;
}
.subpage {
  border: 2px red solid;
  background:#fff;   
  height: 257mm;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
   width: 210mm;
   height: 297mm;
  }
  .page {
    margin: 0;
    border: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

 

js

window.print();