在打印HTML页面时添加页眉/页脚

我创建了一个包含页眉，一些内容和页脚的html页面。我试图获得HTML页面的打印，并且有2页。我在第一页获得了标题，在最后一页获得了页脚。在打印HTML页面时添加页眉/页脚

我真正需要的是页眉和页脚像word文档中的所有页面显示。

2016-08-01 Savera

你可能会寻找[这]（http://stackoverflow.com/questions/1360869/how-to-use-html-to-print -header-and-footer-on-every-printed-page-of-a-document-w） –

-3

有新的CSS技巧@media打印

所以你刚才创建的页眉和页脚，并隐藏他们的主页上时，不打印。只需添加到CSS显示：无

当其时打印，你可以添加媒体到你的CSS和显示回隐藏页脚和标题与：

@media print { 
    #id{ 
    display:block; 
    } 
}

还要检查这个“CSS page-break-after Property” 它会给你打破

页

来源

2016-08-01 12:33:26 TreantBG

可否请您在每页上添加如何打印页眉和页脚的答案？例如，如果你有一个非常长的文本跨越多个页面。 ---正如我理解你的答案，你必须设置你的HTML到一个特定的打印布局：元素不重叠的页面边界，和正确的数量的页眉/页脚打印将需要，不是吗？ – Seika85

你可以用CSS来玩满意的结果。 .page {height：958px} .page .content {min-height：### px; }。根据页眉/页脚高度调整内容最小高度和var content_height。 – TreantBG

此外，这些表格在打印中有一些优势。这里是一些信息http://www.terminally-incoherent.com/blog/2009/10/12/repeating-html-table-headers-on-each-printed-page/ – TreantBG

你需要用你的整个内容的表里面，像功率：

HTML

<table> 
    <thead> 
     <tr><td> 
      <!-- your header goes here --> 
     </td></tr> 
    </thead> 
    <tbody> 
     <tr><td> 
      <!-- your content goes here --> 
     </td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td> 
      <!-- your footer goes here --> 
     </td></tr> 
    </tfoot> 
</table>

...并添加以下CSS：

@media print { 
    thead { display: table-header-group; } 
    tfoot { display: table-footer-group; } 
} 
@media screen { 
    thead { display: block; } 
    tfoot { display: block; } 
}

我需要补充，这可能不是基于WebKit的浏览器工作（截至目前）作为Safari，Chrome和Opera。请在您想要支持的所有浏览器上进行测试。
Chrome可能支持另一种选择：将页眉和页脚设置为position:fixed，但我无法避免在快速测试中与页面内容重叠（即超过一页的页面内容很长）。

编
你可能想有一个在分页不会打破内容元素 - 例如列出跨越多行文本的项目。为了避免这种情况，你可以设置以下CSS：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 
      page-break-inside: avoid; /* Firefox */ 
       break-inside: avoid; /* IE 10+ */

来源

2016-08-01 13:35:10 Seika85

在打印HTML页面时添加页眉/页脚

回答

相关问题