我注意到Chrome不再接受thead作为打印页面的标题。
现在,我使用的是固定位置,但是“内容大小”为零。为了解决这个问题,我创建了一个固定大小的包装器。但这仅在首页上起作用。在第二页上没有包装器,因此,标题位于文本上方。
有没有一种方法可以告诉位置固定的内容应该向下推?
<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>
最佳答案
希望此解决方案对您有用:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
header {
font-size: 20px;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
header {
position: fixed;
top: 0;
padding-bottom:5mm;
}
p {
padding:5mm;
}
}
</style>
<body>
<header>Header </header>
<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>
</html>
关于html - 打印页面上不可见的标题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44824085/