Question

<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

我想在打印模式下的每个页面上打印#header和#footer。我搜索了很多，但似乎没有任何效果，即使position:fixed也没有按预期工作。

Answer 1

如果您愿意切换到适用于您的布局的表格（不一定理想），您可以使用<thead>和<tfoot>元素进行切换。它们将打印在每页的顶部和底部：

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

另一种选择是使用展示table-header-group和table-footer-group，但跨浏览器支持不是很好：

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

Answer 2

我想我来得太晚了:)，但我一直在寻找这样的东西，我找到了一个可以帮助我的答案（来源https://www.youtube.com/watch?v=yDgFLysON98）。我在像这样的内容之前和之后写了div标签

<div id="header">Top div content</div>

.
.
.
<div id="footer">Bottom div content</div>

示例：

<!DOCTYPE html> <html> <head>`` <style> body { background-color: #CCC; margin:48px 0px 0px 64px; } div#header { position:fixed; top:0px; left:0px; width:100%; color:#CCC; background:#333; padding:8px; } div#footer { position:fixed; bottom:0px; left:0px; width:100%; color:#CCC; background:#333; padding:8px; } </style> </head> <body> <div id="header">HEADER</div> <h1>Page Heading</h1> Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... Content placeholder ... <div id="footer">FOOTER</div> </body> </html>

......我希望这会有所帮助。

Answer 3

为此你需要在你的风格中使用mso（microsoft office css属性）：

<style><--
@page 
{
    size:21cm 29.7cmt;
    margin:1cm 1cm 1cm 1cm; 
    mso-title-page:yes;
    mso-page-orientation: portrait;
    mso-header: header;
    mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>

Answer 4

Nisse Engstroms的回答是正确的。你只需要将thead和tfoot内容放在tr中以使其工作。它也是最好的方法，因为当你在div中使用绝对定位来制作页眉和页脚时，它总是会与你的主体内容重叠。下一页。

    
    <table>
    
    <thead>
    <tr> !-- these are important
    <th id="header"> !--- these are important
        !--- content of header here
    </th>
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>
    !---- main body here
    </td>
    </tr>
    </tbody>
    
    <tfoot>
    <tr>
    <th id="footer">
    
        !----- content of footer here
    </th>
    </tr>
        </tfoot>
    
        </table>

在所有页面上打印页眉/页脚（打印模式）

4 个答案: