打印页边距问题

2022年3月21日 122次阅读 来源: lydxwj

问题：

打印功能(打印页面)，预览界面第二页顶部没有间距

问题代码：

<style type="text/css" media="print">
@page { 
    size: auto;  
    margin: 0mm;
}
.print-page { /* 页面盒子样式类 */
    position: absolute;
    width: 1000px;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 40px 50px;
    margin: auto;
}
...
</style>

修改：

<style type="text/css" media="print">
@page { 
    size: auto;  
    margin: 40px 50px;
}
.print-page { /* 页面盒子样式类 */
    position: absolute;
    width: 1000px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
...
</style>

当页面内容超过一页打印纸时，盒子的样式中的内边距无法影响到第二页顶部，因此第二页会出现内容贴顶打印效果。

@page用于修改打印页的样式，考虑兼容性可以修改的非常少。仅仅 margin, padding, border 和 background 等打印时需要的属性可以使用, 其他属性将直接忽略, 并且可以使用的属性也只会在打印时生效, 显示时不会生效（margin可以在预览时看到，其他看不得，没有使用打印机实测），并且不要用vh、vm单位。给@page设置margin可以在所有打印页生效。如果想单独设置第一页等需要加伪类:

  • :first打印文档的时候，第一页的样式
  • :left对打印文档的左侧页样式
  • :right打印文档的所有右页

注意：（谷歌浏览器为例）

  • 实际打印效果用户完全可以自己设置打印页面间距
  • @page设置margin为0时，默认没有显示是否显示页眉页脚选项，边距设置为自定义时会显示页眉页脚选项
  • 目前没有发现显示页脚，并且去掉页脚网址办法（网上查的方法没成功）
    原文作者：lydxwj
    原文地址: https://blog.csdn.net/lydxwj/article/details/106535140
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞