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

我也无法在打印预览中第 2 页底部获得实际@media版权页脚
如果将 .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>

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

<!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已死，CSS分页媒体是主要嫌疑

相关内容

最新更新

热门标签：