admin 管理员组

文章数量: 1086019

Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?

Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?

  • javascript
  • html
  • css
  • printing
Share Improve this question edited Oct 29, 2010 at 5:29 Brock Adams 93.7k23 gold badges241 silver badges305 bronze badges asked Oct 29, 2010 at 4:34 ThomasThomas 5,09921 gold badges71 silver badges101 bronze badges 2
  • 1 The title and the question were in conflict. Please confirm that this is desired at the bottom of each printed sheet and not just once per web-page. – Brock Adams Commented Oct 29, 2010 at 5:31
  • Yeah, so on a document that is multiple pages when printed, the footer needs to occur on each physical page. – Thomas Commented Oct 29, 2010 at 5:34
Add a ment  | 

2 Answers 2

Reset to default 4

CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.

EDIT As pointed out below, CSS 2.1 did introduce @page as a way to deal with paged media, but it was never implemented across the mon browsers. So, as I wrote above, it doesn't exist, although that's not technically true.

You can set hard page breaks, e.g. by placing a <div class="page-break"> at the approximate locations. You can then style it with page-break-before:always to ensure that a break happens there.

There's also a page-break-after property; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0 which wouldn't fix it to the page media, but to the bottom of the whole document.

If you use page-break-before then you know it always appears at the top of the page. Then, you can use position:absolute without giving a top or bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.

Here's how I would tackle it:

/* 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;
  }
}

However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.

The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.

Try this code, but it might not be widely supported yet.

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

本文标签： javascriptAdding a text footer to the bottom of every printed page when a web page is printedStack Overflow

版权声明：本文标题：javascript - Adding a text footer to the bottom of every printed page when a web page is printed - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744067155a2527813.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。