Question

即使我使用@media print
如果您将.footer中的位置更改为“绝对”，则此页脚不会出现在第二页中。

我已经粘贴了下面用html写的字母模板，非常感谢任何人都可以解释我的问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
}
html, body {
min-height: 100%;
position:relative;
}
*#contents { min-height: 100%; }
* html *#contents { height: 100%; }
tfoot { display: table-footer-group; }
@media screen {
td.footer {
height: 37px;
clear: both;
font-family:"Verdana";
font-size:9px;
bottom: 0;
width: 100%;
color: #844C87;
position: fixed;
display none;
}
}
@media print {
.footer {
font-family:"Verdana";
font-size:9px;
color: #844C87;
bottom: 0;
position: absolute;
}
.push {
}
}
</style>
<STYLE TYPE='text/css'>
P.pagebreakhere {page-break-before: always}
</STYLE>
</head>
<body>
<table>
<thead><tr><td>
<!--*************************************************************************************-->
<table>
<tr><td align="left"><img src="someimage.gif"></td></tr>
</table>
<!--*************************************************************************************-->
<table width="650" border="0">
..... Some Header html markup code ....
</table><br/>
<!--*************************************************************************************-->
</td></tr></thead>
<tfoot><tr><td class="footer"><div class="push"></div>...the ACTUAL FOOTER e.g. some copyright statements....</td></tr></tfoot>
<tbody>
<tr><td>
<p>....Some Page 1 html markup code ....</p>
<!--*************************************************************************************-->
<P CLASS="pagebreakhere">
<!--*************************************************************************************-->
<table>
.....Some Page 2 html markup code ....
</table>
<!--*************************************************************************************-->
</td></tr>
</tbody>
</table>
</body>
</html>

Answer 1

请改用浏览器特定的打印对话框。粘性页脚假设支持绝对或固定定位，这两者都不是CSS paged media的一部分。唯一的解决方法是根据内容使用固定边距，例如以下示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>CSS Page Breaks</title>
<style type="text/css">
@media all
  {
  .header, .footer, p { display:none; }
  }

@page :right {
    margin-top:9in;
}

@media print
  {
  .header, .footer
    {
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    page-break-before: right;
    }

  .header { page-break-before: auto; page-break-after: always; }

  p {
    display: block;
    orphans:2;
    widows:1;
    }
}
</style>
</head>
<body>
  <h1 class="header">Title</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<h2 class="footer">End</h2>
</body>
</html>

<强>参考

XSL-FO Is Dead, CSS Paged Media Is Prime Suspect

在打印预览中，html页脚似乎没有粘在底部

1 个答案: