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

10-11 06:14
查看更多