Question

我有以下代码，我正在尝试使用CSS2或CSS3来使其在打印预览时显示在每页的标题下方。

这可能吗？它似乎在第一页上正常工作，但之后每个页面的标题都位于我的内容之上。

<!DOCTYPE html>
<html><head>
<style>
@media print {

h1 {
  position:fixed;
  top: 0;
  left: 0;
}

#content {
  padding-top: 100px;
}
}
</style>
</head>
<body>
<h1>Testing printing CSS</h1>

<div id=content>
<p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p>
</div>
</body> </html>

Answer 1

使用CSS3 Paged Media Module：

中的保证金框

<!DOCTYPE html>
<html>
  <head>
    <title>Print Test</title>
    <style type="text/css">
      @page {
        @top-center {
          content: "Testing printing CSS";
        }
      }
    </style>
  </head>
  <body>
    <p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p>
  </body>
</html>

预先警告：即使在现代浏览器中，这也相对unsupported。

CSS格式化多页打印

1 个答案: