Fatal编程技术网
  • html/
  • Html 打印页上的不可见页眉

Html 打印页上的不可见页眉

html css printing

Html 打印页上的不可见页眉,html,css,printing,Html,Css,Printing,我注意到Chrome不再接受thead作为打印页面的页眉 现在我使用位置固定，但“内容大小”为零。为了解决这个问题，我创建了一个固定大小的包装器。但这只适用于第一页。在第二页上没有包装器，因此标题位于文本上方 有没有办法告诉position fixed它应该向下推内容 <style> #headerWrapper { display: block; height: 50px; } @media print {

我注意到Chrome不再接受thead作为打印页面的页眉

现在我使用位置固定，但“内容大小”为零。为了解决这个问题，我创建了一个固定大小的包装器。但这只适用于第一页。在第二页上没有包装器，因此标题位于文本上方

有没有办法告诉position fixed它应该向下推内容

<style>
    #headerWrapper {
        display: block;
        height: 50px;
    }

    @media print {
        #header {
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            color:#CCC;
            background:#333;
            padding:8px;
            margin-left: 100px;
        }
    }
</style>

<body>
    <div id="headerWrapper">
        <div id="header">HEADER</div>
    </div>
    <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>
    <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>
</body>


#头巾{
显示：块；
高度：50px；
}
@媒体印刷品{
#标题{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
颜色：#CCC；
背景：#333；
填充：8px；
左边距：100px；
}
}
标题
内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符
希望此解决方案适合您：


页面标题
标题{
字体大小：20px；
}
@媒体印刷品{
html，正文{
宽度：210毫米；
高度：297mm；
} 
标题{
位置：固定；
排名：0；
垫底：5mm；
}
p{
衬垫：5mm；
}
}
标题
内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符

内容占位符
请分享你的代码。现在有一个例子：）第一页第二页上下滚动？我不明白你的意思。当您在浏览器中打开代码并按CTRL+P进行打印时，预览显示第二页上的标题位于内容上方。请运行代码，打开打印机预览并向下滚动到第二页发布更新的解决方案，让我知道问题是否仍然存在。不起作用，内容的第一页和第二页的填充不是相等的，我试图减少它，但是第二页和第三页与第一页相比有不同的间距：/。处理它，一旦我得到它，我将更新答案。这就是我所说的。如何创建在每个动态页面上都有标题的打印预览？