如何在@page @top-left 中声明一个div答案

【问题标题】：How to declare a div in @page @top-left如何在@page @top-left 中声明一个div
【发布时间】：2010-05-03 19:22:51
【问题描述】：

如何声明一个 DIV 应该显示在每个页面的左上角而不是其相对位置。

我有一个像这样的 div：

<div id=header>Document</div>

我想使用 css 在左上角的每个页面上显示它，例如：

@page {
    size: 8.5in 11in;
    margin: 0.25in;
    border: thin solid black;
    padding: 1em;


     @top-left {
        content: ???? ;
      }
}

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

我意识到这个问题有点老了，但对于像我这样来这里寻找方法的人来说，可以使用 CSS3 运行元素：http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

在此示例中，标题在除打印之外的所有媒体类型中都隐藏在视图中。在打印页面上，标题显示在所有页面的顶部中心，除了 h1 元素出现的位置。

<style>
  div.header { display: none }
  @media print {
  div.header {
    display: block;
    position: running(header);
  }
  @page { @top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>

<h1 class="chapter">An introduction</div>

【讨论】：

它在 webkit 浏览器中不起作用....有没有其他解决方案可以实现同样的效果
是否有支持此功能的浏览器？据我所知，这还在图纸上。
@NicolasBouliane。很抱歉回复太晚了。我在从 xhtml 生成 pdf 时使用了它（使用 FlyingSaucer - 它确实有效），所以恐怕我实际上并没有看到它在浏览器中工作。
@NicolasBouliane：正确 - css 3 分页媒体模块边距框尚未在任何主流浏览器中实现。详情请见Comparison of layout engines。
这不会使页眉出现在所有页面上。

【解决方案2】：

没有

#header {
   position: fixed;
   top: 0;
   left: 0;
}

工作？见Printing Headers。另外，请查看position: fixed 的 W3C 规范。

编辑：如果我充分阅读了有关 Margin Boxes 的 CSS 3 规范，以及有关 content 属性的 CSS 2.1 规范，我认为您不能嵌入 @987654328 @ 从你的页面变成一个 Margin Box 的内容，唉。

【讨论】：

不，虽然这会将页眉放在左上角，但它将在页面内容区域内，而不是页面边距框。抱歉，我应该指定这是用于印刷媒体的。请参阅w3.org/TR/css3-page/#page-box-page-rule
@icon911：不，我的错，我没有充分阅读您的问题（并且没有研究@top-left 规则，在您链接到 CSS3 之前我不知道规格）