CSS to set A4 paper size

CSS to set A4 paper size

I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.

See this Live example!

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

I think I'm forgetting something. But what would it be?

• Chrome: clipping page, double page (it's just what I need it to work)
• Firefox: it works perfectly.
• IE10: believe it or not, it's perfect!
• Opera: very buggy on print preview

이것을 좀 더 알아봤는데 실제 문제는 할당에 있는 것 같습니다.initial호출하다, 호출하다, 호출하다, 호출하다, 호출하다width아래에print미디어 룰크롬에 있는 것 같습니다.width: initial에서.page요소는 특정 길이 값이 정의되지 않은 경우 페이지 내용의 축척 결과를 가져옵니다.width부모 요소 중 하나(width: initial이 경우에는 하기로 결정합니다.width: auto... 그러나 실제로 아래에 정의된 크기보다 작은 값.@page규칙은 동일한 문제를 야기합니다).

따라서 내용이 페이지에 비해 너무 길 뿐만 아니라(약), 페이지 패딩도 처음보다 약간 더 길 것입니다(아래 내용을 렌더링하는 것 같습니다).width: auto의 너비로 전체 콘텐츠를 ~의 너비까지 축척하지만 이상하게도 동일한 축척 계수가 너비가 )보다 작은 콘텐츠에 적용됩니다.

이 문제를 해결하려면 간단하게print미디어 규칙은 A4 용지 너비와 높이를 다음에 할당합니다.html, body아니면 직접.page그리고 이 경우는 피합니다.initial키워드.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).}

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO

https://github.com/cognitom/paper-css seems to solve all my needs.

Paper CSS for happy printing

Front-end printing solution - previewable and live-reloadable!

ReferenceURL : https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size