填充CSS window.print（）@page无效

Question

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

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

Answer 1

使用@media print代替@page，为什么？

这是@page浏览器支持：

这是@media print

  

@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>