为要打印的每个页面设置边距/填充（html/css）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41778117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set margin/padding for each page to print (html/css)?
提问by user2274195
I've a lot of contents on page which i don't have control of where it breaks. And I've placed some contents using position:fixedon each page as header/footer but it overlap with text. I tried to solve the overlapping using margin and padding in following two ways.
我在页面上有很多内容，我无法控制它在哪里中断。我position:fixed在每个页面上放置了一些内容作为页眉/页脚，但它与文本重叠。我尝试通过以下两种方式使用边距和填充来解决重叠问题。
When i added margin using @page
当我使用 @page 添加边距时
@page {
margin: 2cm;
}
It works on every page as it says, but my header and footer also taken away from margin.
正如它所说的那样，它适用于每一页，但我的页眉和页脚也从边距中消失了。
So I tried to adding margin using body tag
所以我尝试使用 body 标签添加边距
body {
margin: 2cm;
/* padding: 2cm; */
}
it work by adding 2cm top margin on first page and 2cm bottom margin on last page. But not in between pages.
它的工作原理是在第一页上添加 2 厘米的上边距，在最后一页上添加 2 厘米的下边距。但不是在页面之间。
Is it possible to set margin/padding each page?
是否可以设置每页边距/填充？
回答by Serg Chernata
Your first option was correct, what you need to do is just position your header and footer as running.
您的第一个选项是正确的，您需要做的只是将页眉和页脚定位为running.
@page {
margin: 2cm;
@top-center {
content: element(pageHeader);
}
@bottom-center {
content: element(pageFooter);
}
}
#pageHeader{
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
回答by Mohammad Musavi
I encountered exactly the same problem and after searching a lot I found an interesting article offering a combinative solution which you can read here.
我遇到了完全相同的问题，经过大量搜索后，我发现了一篇有趣的文章，提供了一个组合解决方案，您可以在此处阅读。
In short it combines two methods:
简而言之，它结合了两种方法：
Using
position: fixedtechniqueUsing
thead tbody tfoot
使用
position: fixed技术使用
thead tbody tfoot
If you only use the first method you will face the overlapping issue, in the same way If you only use the second method, footer will stick to the bottom of the content of page which might ended in the begging of the last page, but combination of both methods resolves the problem.
如果只使用第一种方法会遇到重叠的问题，同理如果只使用第二种方法，footer会粘在页面内容的底部，可能会以最后一页的乞求结束，但组合两种方法都可以解决问题。
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-footer:after {
counter-increment: page;
content: counter(page)
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
@page {
margin: 20mm
}
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer, Page #
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>Here you can see a working demo.
在这里你可以看到一个工作演示。
To make sure this solution works properly, try to print it by pressing Print Me!button.
为确保此解决方案正常工作，请尝试按Print Me!按钮进行打印。
You might even need to have page numberin the footer, it's done by CSS too, you only need to add following CSS:
您甚至可能需要在页脚中有页码，它也是由 CSS 完成的，您只需要添加以下 CSS：
.page-footer:after {
counter-increment: page;
content: counter(page)
}
In some articlesit's content: counter(page) " of " counter(pages);, but in my case pagesreturns 0 all the time for no reason, so I ignored it, maybe you can achieve the count of total pages by using CSS var().
在某些文章中它是content: counter(page) " of " counter(pages);，但在我的情况下pages一直无缘无故地返回 0，所以我忽略了它，也许你可以通过使用 CSS var() 来实现总页数。
For the record if you'd like not to observe the header and footer before printing you can add following CSS:
为了记录，如果您不想在打印前观察页眉和页脚，您可以添加以下 CSS：
@media screen {
.header, .footer {
display: none;
}
}
Update 2020:
2020 年更新：
It seems page number doesn't work anymore.
似乎页码不再起作用了。
回答by Johnny Johannine
@page {
padding: 2cm;
margin: 3cm;
}
回答by Mayuresh Patil
Try this...
尝试这个...
Be sure to have a stylesheet assigned for printing. It could be a separate stylesheet or you can use bootstrap stylesheet:
确保为打印分配了一个样式表。它可以是一个单独的样式表，也可以使用 bootstrap 样式表：
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
或者
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheet or in the shared one using media queries as:
然后，您可以在单独的样式表或使用媒体查询的共享样式表中为打印机编写样式，如下所示：
@media print {
/* Your styles here */
}
}
