在打印网页时在每个打印页面的底部添加文本页脚

2010-10-29 Thomas

标题和问题有冲突。请确认这是每张印刷页底部所需的，而不是每个网页一次。 – 2010-10-29 05:31:36

是的，所以在打印多页文档时，页脚需要在每个物理页面上出现。 – Thomas 2010-10-29 05:34:08

CSS没有任何页面媒体的概念，所以它不可能保证分页将自然发生的地方。

编辑正如指出的下方，CSS 2.1做了介绍@page的方式来处理页面媒体，但它是never implemented跨越常见的浏览器。所以，正如我上面写的，它不存在，虽然这在技术上并不正确。

您可以设置硬分页符，例如在大概的位置放置<div class="page-break">。然后，您可以使用page-break-before:always进行设计，以确保在那里发生中断。

还有一个page-break-after属性;但是然后你不知道元素开始的页面有多远。所以，当你需要定位它时，唯一可以使用的是position:absolute;bottom:0，它不会将其固定到页面媒体，而是固定到整个文档的底部。

如果您使用page-break-before，那么您知道它总是出现在页面的顶部。然后，您可以使用position:absolute而不给出top或bottom，这样只会将其从文档流中提取出来。然后，给它一个720pt（10英寸）的高度意味着你有一个底部边缘，你可以对内容进行定位。

这是我会怎么对付它：

/* hide the page footer on screen display */ 
.page-break { display: none; } 

@media print { 
    /* make a 10-inch high block that sits on top of the page content */ 
    .page-break { 
    page-break-before: always; 
    display: block; 
    position: absolute; 
    height: 720pt; 
    } 

    /* stick the contents of .page-break to the bottom of the 10 inch block */ 
    .page-break .copyright { 
    position: absolute; 
    bottom: 0px; 
    } 
}

但是，我不知道如何实际上浏览器都支持这个现实。我记得前几次玩分页，最后放弃了，因为我无法让他们足够可靠地工作。我怀疑它仍然是不可能的，或者非常黑客和不可靠。

来源

2010-10-29 05:18:18

CSS没有任何分页媒体的概念？！呃...它有关于这个问题的整章！ http://www.w3.org/TR/CSS21/page.html – Quentin 2010-10-29 05:25:58

@David，我应该澄清，我不认为它支持任何地方，当我上次尝试它... – 2010-10-29 05:27:42

我创建这些文档在HTML/CSS，但我使用红宝石将它们转换为PDF，有没有办法将这些信息直接传递给PDF？也就是说，对于正在转换为PDF的文档，是否还有另一种更可靠的技术？ – Thomas 2010-10-29 05:54:34

CSS分页媒体模块3级的W3C工作草案包含一个打印边距的方法。

试试这个代码，但它可能尚未得到广泛支持。

@page { 
    margin: 2cm; 2cm; 2cm; 2cm; 
    @bottom-center { content: "Copyright My Company 2010" } 
    @top-right { content: counter(page) } 
}

来源

2015-01-05 11:02:09 JohanB

在打印网页时在每个打印页面的底部添加文本页脚

回答

相关问题