Header & Footer In Print Page? Not The Web browser Header And Footer_问答_开发者

Header & Footer In Print Page? Not The Web browser Header And Footer

开发者 https://www.devze.com 2023-01-15 00:44 出处：网络

相关专题：css

I Have Problem with Headers And Footer on web page Which is Going to Print. My custom headers and footer should print on each page. Header is printing at top of page, that is fine, but footer is not printing at bottom of page if the content is less on page. footer is printing depends on content.

HERE MY CODE IS:-

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <link rel='stylesheet' type='text/css' href='print.css' media='print'>
    <title></title>
  </head>
  <body>
    <table border="0" align="center" width="100%">
      <thead开发者_C百科>
        <tr>
          <th align="center" width="100%">
            <font size="5" color="black"><strong>HEADER HERE</strong></font>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td align="center" width="100%">
            <font size="4" color="black"><strong>FOOTER HERE</strong></font>
          </td>
        </tr>
      </tfoot>
      <tbody height="100%">
        <tr>
          <td width="100%">
            CONTENT HERE
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

MY CSS IS:-

.thead {
display: table-header-group;
}

.tfoot {
display: table-footer-group;
}

Can any one suggest me how to do it ? that would great help?

Since you have a print.css, write (only in print.css):

thead {
    display: block;
    position: fixed;
    top: 0;
}

tfoot {
    display: block;
    position: fixed;
    bottom: 0;
}

Depending on how much height your thead and tfoot might occupy, use an appropriate margin-top and margin-bottom on the table to avoid any overlap that might occur.

This is the code i use. Note I am setting both html and body height to 100% (needed for Chrome and Safari). Tested and works fine in IE9, FF, Chrome.

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}