Html 打印pdf时100 vh迪夫有半页高

发布于04月18日

我将迪夫设置为media print vh，但打印时它只是页面的一半.我try 添加media print，但没有更改.我还try 将高度设置为media print%.在HTML中有效，但在pdf上无效.

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
}

.page100vh {
  background-color: red;
  height: 1000vh;
  width: 100vw;
}

@media print {
  .page100vh {
    height: 100vh;
  }
}

<div class="page100vh"></div>

推荐答案

在PDF中定义对象时，X Y的单位应该相似(从技术上讲，PDF是无单位的).因此，最好将px用于HTML.然而，我们可以使用英寸或毫米作为媒体比例，例如A4的210 x 297.

完全覆盖该页面的分区可以描述为宽度的100%，因此高度应为相同宽度单位的141.421%，对于2页，高度应为宽度的282.842%.vh与vw无关，因为PDF /MediaBox视区比例仅对HTML屏幕有用.

@media print {
@page { size: A4;
  margin: 0;
}
}
html,
body {

  margin: 0;
  position: relative;
}

.pageDiv {
  background-color: red;
  height: 141.421vw;
  width: 100vw;
}