@media print div：如何解决页面上重叠的页面文本？

Question

我找到了这个问题的一些答案，但这不适用于我的CSS。 目前我想打印成A4风景。我将每个div创建为一个页面，其中包含css和print css，如下所示：

.page {
    background-color: #FFF;
    margin: 10pt 0pt 10pt 0pt;
    width: 800pt;
    height: 600pt;
    padding: 22pt;
}

和

@media print {
    .page {
        height: 210mm;
        width: 297mm;
        size: A4;
        bottom: 3em;
    }

JSfiddle https://jsfiddle.net/vc5L29m9/ 但每个页面中的div都相互重叠，并倾向于移动到顶部。 我错过了什么css？

Answer 1

• 将size属性移至@page规则。

• 添加size: landscape。

• 使用page-break-after属性控制每page课后的分页符。

还添加了一个类来隐藏打印元素。对你不需要的东西也这样做。 （打印按钮）

以下是updated Fiddle

CSS

@page {
  size: landscape;
}

@media print {
  .page {
    page-break-after: always
  }
  .no-print {
    display: none;
  }
}