填充 CSS window.print() @page 不工作答案

【问题标题】：padding CSS window.print() @page not working填充 CSS window.print() @page 不工作
【发布时间】：2017-05-31 18:37:11
【问题描述】：

我正在尝试在我的打印页面上制作页脚，但是这个页脚停留在页面上的内容之上。我想用页脚高度设置 padding-bottom，但是当我在 @page css 上添加 padding-bottom 时没有任何变化。

如何在 @page css 上使用 padding-bottom？

【问题讨论】：

标签： html css printing

【解决方案1】：

使用@media print 而不是@page，为什么？

这是@page 浏览器支持：

这是`@media print`

@媒体打印

适用于分页材料和在打印预览模式下在屏幕上查看的文档。请参阅分页媒体部分和入门教程的媒体部分，了解有关分页媒体特定格式问题的信息。

参考号：https://developer.mozilla.org/en-US/docs/Web/CSS/@media

function printData() {
  window.print();
}

$('button').on('click', function() {
  printData();
})

@media print {
  div {
    color: green;
    margin-bottom: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./haha.css" media="print, screen"/> -->


<div>
  test print 1
</div>
<div>
  test print 2
</div>
<div>
  test print 3
</div>
<div>
  test print 4
</div>


<button>Print me</button>

【讨论】：

这是@media print

@媒体打印

这是`@media print`