4

いくつかの方法を試しましたが、どれも適切に機能していないようです。HTML レポートがあり、すべてのページにヘッダーとフッターを含むレポートを印刷する必要があります。これがFirefoxで機能する必要があります！

解決策 1:

<html>
<head>
<title></title>
<style type="text/css">
@media print {
#footer {
    display: block;
    position: fixed;
    bottom: 0;
}
}
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th style="width:100%"> header content </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td width="100%"><table width="100%" border="0">
          <tr>
            <td colspan="4"><br>
              &nbsp;</td>
          </tr>
        </table>
  </tfoot>
  <tbody>
    <tr>
      <td width="100%"> main content </td>
    </tr>
  </tbody>
</table>
<table id="footer" width="100%">
  <tr>
    <td width="100%"> footer content </td>
  </tr>
</table>
</body>
</html>

解決策 1 の問題:メイン コンテンツがフッターの上に重なっています。

解決策 2:

<html>
<head>
<title></title>
<style type="text/css">
@media print {
thead {
    display: table-header-group;
}
tfoot {
    display: table-footer-group;
}
}
@media screen {
thead {
    display: block;
}
tfoot {
    display: block;
}
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <td>header content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> main content </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer content</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

解決策 2 の問題: フッターがメイン コンテンツのすぐ下にあり、常にページの下部にあるとは限りません。

ヘルプまたはその他の解決策はありますか?

ありがとう

4

2 に答える 2

0

私があなたを正しく理解していれば、試してみてください：フッターの高さを50px（100px、200px ...何でも）に設定し、メインコンテンツにmargin-bottom:50px（フッターの高さ）を追加してください

これにより、フッターを含む上にあるコンテンツを除外する必要があります。

于 2012-11-12T12:28:21.387 に答える
0

わかりました、問題の解決策を見つけました。同じように悩んでいる方のために載せておきます。最初の例では、フッターに必要な高さを tfoot に割り当てるだけです。

例えば：

<tfoot>
   <tr> 
    <td width="100%"> 
     <table width="100%" border="0"> 
       <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr>
    </table> 
  </tfoot>

または、1 つのクラスを割り当てて、必要な高さを設定します。

于 2012-11-12T17:04:06.097 に答える