page-break-after:always; 打印时不分页的问题 仅有一页时打印多一页

page-break-after:always;使用window.print()预览时

1 打印时不分页的问题

   设置该css的必须是块级元素(block),其他(inline 和inline-block )均能分页

2 仅有一页时打印多一页的问题

  a.设置 :last-child  {

page-break-after:avoid}

 b.若还是无效,则设置body高度<100% ,如(99.5%)

例子:

 

复制代码
 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <meta http-equiv="x-ua-compatible" content="IE=8; IE=11">
 5 
 6 <script type="text/javascript" src="/framework/jQuery/jquery-1.10.2.min.js"></script>
 7 
 8 
 9 <title>asdf</title>
10 
11 <style>
12 .divide {
13 page-break-after:always;
14 background-color:green;
15 
16 }
17 .divide:last-child {
18 page-break-after:avoid;
19 background-color:red;
20 
21 }
22 
23 body {
24 margin: 0px auto;
25 padding: 0px;
26 }
27 </style>
28 
29 </head>
30 <body><input type="button" value="印刷" name="btnPrint" onclick="window.print()" class="fwWiz_DicObj fwFocusField" fwfocusinvalue="印刷">
31 <table class="divide">11</table>
32 
33 <table class="divide">22</table>
34 <div class="divide">1</div>
35 
36 <div class="divide">2</div>
37 <footer></footer>
38 </body>
39 </html>

复制代码

 

posted @   飘雪飞阳  阅读(1508)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示