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

发布于 2024-12-18 23:36:04 字数 351 浏览 0 评论 0原文

<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 也没有按预期工作。

原文

<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>

I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

为你拒绝所有暧昧 2024-12-25 23:36:04

如果您愿意根据自己的布局切换到表格（不一定理想），则可以使用和元素来实现。它们将打印在每个页面的顶部和底部：

<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;
}

If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They'll print at the top and bottom of every page:

<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>

Another option is to use display table-header-group and table-footer-group but cross-browser support isn't great:

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

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

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

回复收藏 0 原文

紫瑟鸿黎 2024-12-25 23:36:04

我想我来得太晚了:)，但我一直在寻找这样的东西，我找到了一个对我有帮助的答案（来源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 think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98).
I wrote the div tag before and after the content like this

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

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

Example:

<!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.

回复收藏 0 原文

三生池水覆流年 2024-12-25 23:36:04

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

For that you need to use the mso (microsoft office css properties) in your style:

<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>

回复收藏 0 原文

自由如风 2024-12-25 23:36:04

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>

Nisse Engstroms answer is correct. You just need to put the thead and tfoot content inside a tr to make it work.And it also is the best method because when you use absolute positioning in a div to make header and footer it will always overlap with your main body content on the next page.

    
    <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>

回复收藏 0 原文

~没有更多了~