@media打印页脚信息相互重叠

时间:2013-04-10 16:23:15

标签: html css

我在打印时使用以下css创建页脚:

@media all {
   .page-break  { display: none; }
   .footer {display: none; }    
}

@media print {
   .page-break  { display: block; page-break-before: always; }
  .footer {display: block; position: fixed; bottom: 0; text-align: center; width:100%;}  
}

在html中,我有类似的东西:

<body>
  ...
  ...
 <div class='footer'>Page Number: 1</div>
 <div class='page-break'></div>
 ...
 ...
 <div class='footer'>Page Number: 2</div>
 <div class='page-break'></div>
 ...

</body>

现在的问题是,在打印视图中,第1页和第2页的页脚,它们的内容相互重叠。

我知道这是由css“position:fixed; bottom 0”引起的。我的问题是:在打印视图中,第1页和第2页的页脚如何仍然显示在页面1和页面2的底部,但它们彼此不重叠?

感谢。

1 个答案:

答案 0 :(得分:0)

也许你可以将其中一个放在中心位置。