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

Question

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

31

<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也无法按预期工作。

- eozzy

1

这个怎么样？这里。 - Madara's Ghost

4个回答

4

我想我来晚了：），但我正在寻找类似的东西，我找到了一个帮助我的答案（来源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>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>

... I hope this helps.

- Oscar Albert

3

我已经尝试了这种方法，但页脚会遮挡页面内的内容。您有任何想法如何设置页面，以便页脚不会遮挡任何内容吗？我们需要在哪里添加分页符吗？ - macha devendher

1

为此，您需要在样式中使用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>

- Vincent Teyssier

0

Nisse Engstrom的回答是正确的。你只需要将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>

- Shrey Gupta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pat · Accepted Answer

如果您愿意切换到使用表格进行布局（不一定是理想的方法），您可以使用 <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;
}