在打印网页时在每个打印页面的底部添加文本页脚
是否有一种技术可以在打印时在每个页面的底部添加文本页脚?例如“版权所有我的公司2010” - 我知道可能有一种方法可以使用CSS实现背景图像,但我真的很想为这部分使用文本,以便客户端可以对其进行编辑。有任何想法吗?在打印网页时在每个打印页面的底部添加文本页脚
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;
}
}
但是,我不知道如何实际上浏览器都支持这个现实。我记得前几次玩分页,最后放弃了,因为我无法让他们足够可靠地工作。我怀疑它仍然是不可能的,或者非常黑客和不可靠。
CSS分页媒体模块3级的W3C工作草案包含一个打印边距的方法。
试试这个代码,但它可能尚未得到广泛支持。
@page {
margin: 2cm; 2cm; 2cm; 2cm;
@bottom-center { content: "Copyright My Company 2010" }
@top-right { content: counter(page) }
}
标题和问题有冲突。请确认这是每张印刷页底部所需的,而不是每个网页一次。 – 2010-10-29 05:31:36
是的,所以在打印多页文档时,页脚需要在每个物理页面上出现。 – Thomas 2010-10-29 05:34:08