3
  1. @media print を使用しているにもかかわらず、印刷プレビューで 2 ページの下部にある実際の著作権フッターを取得できませんでした。
  2. .footer の位置を「absolute」に変更すると、このフッターは 2 ページ目に表示されません。

以下に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>
4

1 に答える 1

0

代わりに、ブラウザ固有の印刷ダイアログを使用してください。スティッキー フッターは絶対配置または固定配置のサポートを前提としていますが、どちらも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>

参考文献

于 2012-10-13T20:33:33.467 に答える