Question

我注意到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>

Answer 1

希望此解决方案适合您：

＆＃13;

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

＆＃13;

打印页面上的隐形标题

1 个答案: