每页上的文字重叠（CSS @media query print）
Text is overlapping on each page (CSS @media query print)
我正在使用 HTML、JS 和 CSS 创建一个可打印的网页。每个页面都必须有带有公司品牌的页眉和页脚。但是当我想查看打印预览时，我已经知道了。文本在分页符处溢出了页脚和页眉。
见下图：
下面是我现在的代码：
@media print {
@page {
size: A4;
margin: 1.3cm 2.5cm 0.75cm 2.5cm;
}
* {
margin: 0;
padding: 0;
}
.print-footer {
position: fixed;
display: block;
bottom: 0;
left: 0;
width: 100%;
z-index: -1;
}
.print-body {
margin: 30px 0 30px 0;
}
.print-header {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
}
<div class="visible-print">
<div class="print-header">
<img src="https://via.placeholder.com/300x60?text=Logo">
</div>
<div class="print-body">
<button onclick="window.print()">Print</button>
<div id="print-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie sem tempus mauris mollis aliquet. Sed efficitur sem id ligula rhoncus congue et in massa. Sed in urna metus. Duis ultrices ligula risus, vitae vehicula diam pretium non. Ut
vitae nunc lacinia, scelerisque quam vitae, aliquam lacus. Sed dictum ultricies ornare. Fusce consequat est ac vulputate pulvinar. Donec sed nisi odio. Cras imperdiet ullamcorper pulvinar. Vivamus leo nulla, malesuada id bibendum vitae, ultricies
quis tellus. Quisque congue pulvinar lobortis. Praesent sit amet nibh tristique, dictum nunc id, scelerisque risus. Vivamus interdum metus odio, et dapibus dolor hendrerit ut. Suspendisse non laoreet nisi. Proin at risus vel dolor facilisis dictum.</p>
<p>Donec at diam euismod, imperdiet mauris sed, molestie ante. Ut vehicula neque tellus, id mattis libero commodo id. Sed et semper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam auctor suscipit leo. Mauris egestas lacinia
est. Vestibulum vitae nulla nisi. Phasellus varius diam et turpis commodo iaculis. Aliquam vitae facilisis ligula.</p>
<p>Curabitur id arcu augue. Nullam ac arcu posuere, rutrum nisi vel, finibus metus. Aenean semper sapien a eros condimentum vulputate. Ut ac mattis tortor. Donec libero velit, sodales quis metus id, bibendum eleifend erat. Nam dapibus efficitur dui
id bibendum. Aliquam pretium sodales hendrerit. Fusce commodo urna enim, eget tempus diam ultrices et. Donec egestas augue eget viverra rhoncus. Quisque turpis nibh, vulputate sed velit quis, tempus hendrerit arcu. Aenean nulla purus, dictum rutrum
pretium et, venenatis vel diam. Maecenas auctor ex sit amet leo varius, cursus ultrices urna scelerisque. Nam semper urna nec mi pretium, a aliquet lacus luctus. Curabitur turpis nibh, facilisis ut lobortis sed, suscipit sed ipsum.</p>
<p>Praesent ultricies diam non est posuere, eu commodo metus blandit. In hac habitasse platea dictumst. Aliquam at euismod diam, ut imperdiet lacus. Curabitur ornare quam quis lobortis ultricies. Quisque eget iaculis ante, nec sollicitudin nisi. Proin
metus mi, viverra quis mauris a, tincidunt fringilla velit. Vivamus iaculis eget neque eu feugiat. Nulla tempus convallis turpis ut interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sed accumsan
leo. Sed pharetra malesuada ligula vitae congue. Aenean non erat lobortis, venenatis felis nec, consequat urna.</p>
<p>Nullam vel quam purus. Nullam tempus risus nisi, et consequat nulla semper at. Mauris aliquet dignissim consequat. Integer mollis ante id luctus vestibulum. In hendrerit facilisis mi, at volutpat nibh malesuada ac. Nam finibus fermentum lectus ac
posuere. Pellentesque dapibus mauris eget neque placerat, in tristique dolor convallis. Ut varius euismod elit, eget posuere risus vulputate id. Suspendisse non consectetur neque. Aliquam lobortis augue mi, nec hendrerit neque finibus vitae. Phasellus
ipsum lorem, vehicula et dapibus eu, sollicitudin vitae nibh. Sed mollis, nisl finibus sollicitudin vestibulum, lacus tortor vehicula leo, nec porttitor nibh nulla et lectus. Pellentesque placerat, risus nec hendrerit pulvinar, odio purus pellentesque
odio, et accumsan dui enim id libero. Vivamus varius quam eu interdum porttitor. Nullam in aliquet ipsum.</p>
<p>Etiam interdum ultricies enim non tincidunt. Morbi sapien nulla, aliquet nec dignissim ac, fringilla dictum odio. Nullam interdum interdum urna, in varius risus lobortis vel. Phasellus tempus fringilla urna. Mauris vulputate, purus suscipit ultrices
mollis, massa augue congue leo, eget tempus enim eros in turpis. Vestibulum malesuada consequat dapibus. Quisque suscipit felis nibh, in tincidunt arcu molestie scelerisque. Donec scelerisque, enim sagittis elementum consequat, lacus dolor cursus
tortor, vel vulputate dolor sapien sed nulla.</p>
<p>Maecenas posuere, sapien id aliquam convallis, mi ipsum interdum metus, id elementum mi urna vel lectus. Cras finibus orci quis tortor facilisis viverra. Sed sed ultrices sem. Etiam fermentum felis enim, sed aliquam felis mattis eu. Integer finibus
lorem libero, tristique malesuada mauris feugiat eget. Integer risus metus, lacinia eu augue sit amet, lacinia pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis aliquet felis, eleifend ultrices risus hendrerit
quis. Nulla laoreet tincidunt elit. Integer accumsan purus lorem, non dapibus odio laoreet vel. Proin porttitor est ac sapien ultrices, vitae interdum mi imperdiet. Cras accumsan egestas augue, nec ullamcorper dolor commodo eget.</p>
<p>Aliquam suscipit sit amet ex ut tempus. Nullam nec erat tempus, blandit erat at, malesuada lacus. Donec interdum ut mauris quis facilisis. Nulla tempor, ipsum id finibus sollicitudin, velit tortor convallis dui, in luctus ex lectus eget lorem. Nulla
in quam sed enim consectetur tempus. Maecenas sollicitudin nunc vulputate, pharetra nunc a, sagittis lacus. Mauris eget leo felis. Donec scelerisque sapien at turpis eleifend, in imperdiet magna congue. Nullam rhoncus sit amet turpis a euismod.
Quisque nisl risus, blandit a fringilla non, cursus sit amet urna. Nulla dolor velit, lacinia luctus venenatis sed, imperdiet vitae mi.</p>
<p>Fusce molestie est nisl, vitae viverra massa laoreet a. Nullam eu fringilla libero. In vel convallis nisl. Etiam ultricies eu dolor et semper. Sed consequat ultricies lorem at efficitur. Proin a erat fermentum, pretium neque eget, lobortis augue.
Morbi sem tortor, blandit sit amet orci eu, fermentum condimentum dolor. Etiam finibus efficitur magna in porttitor. Nulla facilisi. Nunc id dapibus urna, eget mattis lorem. Vivamus placerat justo in neque malesuada, et mollis mi fermentum. Vivamus
vel luctus orci, eget convallis nisl. Phasellus ultricies tortor elit, ut tempus urna elementum ac. Sed aliquam, turpis ac gravida tempor, nunc nulla accumsan eros, eu cursus enim turpis et massa.</p>
<p>Integer commodo orci vitae fermentum iaculis. Sed efficitur lectus vitae auctor tempus. Mauris vel facilisis massa. Duis aliquet tristique feugiat. Nullam ornare pellentesque ultricies. Sed vestibulum iaculis odio, gravida varius augue aliquam ut.
Ut luctus euismod pretium. Mauris iaculis, est in aliquet molestie, odio turpis sollicitudin ex, in venenatis risus leo in mauris. Nullam fringilla pretium massa quis finibus. Fusce consectetur aliquet posuere. Aenean at dictum lacus, et hendrerit
augue. Cras rhoncus leo in elit dictum, finibus vulputate lorem euismod. Nunc lorem nibh, laoreet non felis non, cursus tincidunt magna. Nulla volutpat eros auctor purus laoreet congue. Proin in dictum felis, et dapibus erat. Phasellus ultricies
tortor nisl, sit amet vulputate neque sodales consectetur.</p>
</div>
</div>
<img class="print-footer" src="https://via.placeholder.com/300x60?text=Logo">
</div>
如何解决才能使文本不与每页的页眉和页脚重叠？
我找到了解决方案
https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
@media print {
@page {
size: A4;
margin: 1.3cm 2.5cm 0.75cm 2.5cm;
}
* {
margin: 0;
padding: 0;
}
.header,
.print-header-space,
.footer,
.print-footer-space {
height: 100px;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: fixed;
bottom: 0;
}
}
<div class="header"><img src="https://via.placeholder.com/300x60?text=Logo"></div>
<table>
<thead>
<tr>
<td>
<div class="print-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<button onclick="window.print()">Print</button>
<div class="print-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie sem tempus mauris
mollis
aliquet. Sed efficitur sem id ligula rhoncus congue et in massa. Sed in urna metus. Duis
ultrices
ligula risus, vitae vehicula diam pretium non. Ut
vitae nunc lacinia, scelerisque quam vitae, aliquam lacus. Sed dictum ultricies ornare.
Fusce
consequat est ac vulputate pulvinar. Donec sed nisi odio. Cras imperdiet ullamcorper
pulvinar.
Vivamus leo nulla, malesuada id bibendum vitae, ultricies
quis tellus. Quisque congue pulvinar lobortis. Praesent sit amet nibh tristique, dictum nunc
id,
scelerisque risus. Vivamus interdum metus odio, et dapibus dolor hendrerit ut. Suspendisse
non
laoreet nisi. Proin at risus vel dolor facilisis dictum.</p>
<p>Donec at diam euismod, imperdiet mauris sed, molestie ante. Ut vehicula neque tellus, id
mattis
libero commodo id. Sed et semper nunc. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
Nam auctor suscipit leo. Mauris egestas lacinia
est. Vestibulum vitae nulla nisi. Phasellus varius diam et turpis commodo iaculis. Aliquam
vitae
facilisis ligula.</p>
<p>Curabitur id arcu augue. Nullam ac arcu posuere, rutrum nisi vel, finibus metus. Aenean
semper sapien
a eros condimentum vulputate. Ut ac mattis tortor. Donec libero velit, sodales quis metus
id,
bibendum eleifend erat. Nam dapibus efficitur dui
id bibendum. Aliquam pretium sodales hendrerit. Fusce commodo urna enim, eget tempus diam
ultrices
et. Donec egestas augue eget viverra rhoncus. Quisque turpis nibh, vulputate sed velit quis,
tempus
hendrerit arcu. Aenean nulla purus, dictum rutrum
pretium et, venenatis vel diam. Maecenas auctor ex sit amet leo varius, cursus ultrices urna
scelerisque. Nam semper urna nec mi pretium, a aliquet lacus luctus. Curabitur turpis nibh,
facilisis ut lobortis sed, suscipit sed ipsum.</p>
<p>Praesent ultricies diam non est posuere, eu commodo metus blandit. In hac habitasse platea
dictumst.
Aliquam at euismod diam, ut imperdiet lacus. Curabitur ornare quam quis lobortis ultricies.
Quisque
eget iaculis ante, nec sollicitudin nisi. Proin
metus mi, viverra quis mauris a, tincidunt fringilla velit. Vivamus iaculis eget neque eu
feugiat.
Nulla tempus convallis turpis ut interdum. Orci varius natoque penatibus et magnis dis
parturient
montes, nascetur ridiculus mus. Cras sed accumsan
leo. Sed pharetra malesuada ligula vitae congue. Aenean non erat lobortis, venenatis felis
nec,
consequat urna.</p>
<p>Nullam vel quam purus. Nullam tempus risus nisi, et consequat nulla semper at. Mauris aliquet
dignissim consequat. Integer mollis ante id luctus vestibulum. In hendrerit facilisis mi, at
volutpat nibh malesuada ac. Nam finibus fermentum lectus ac
posuere. Pellentesque dapibus mauris eget neque placerat, in tristique dolor convallis. Ut
varius
euismod elit, eget posuere risus vulputate id. Suspendisse non consectetur neque. Aliquam
lobortis
augue mi, nec hendrerit neque finibus vitae. Phasellus
ipsum lorem, vehicula et dapibus eu, sollicitudin vitae nibh. Sed mollis, nisl finibus
sollicitudin
vestibulum, lacus tortor vehicula leo, nec porttitor nibh nulla et lectus. Pellentesque
placerat,
risus nec hendrerit pulvinar, odio purus pellentesque
odio, et accumsan dui enim id libero. Vivamus varius quam eu interdum porttitor. Nullam in
aliquet
ipsum.</p>
<p>Etiam interdum ultricies enim non tincidunt. Morbi sapien nulla, aliquet nec dignissim ac,
fringilla
dictum odio. Nullam interdum interdum urna, in varius risus lobortis vel. Phasellus tempus
fringilla
urna. Mauris vulputate, purus suscipit ultrices
mollis, massa augue congue leo, eget tempus enim eros in turpis. Vestibulum malesuada
consequat
dapibus. Quisque suscipit felis nibh, in tincidunt arcu molestie scelerisque. Donec
scelerisque,
enim sagittis elementum consequat, lacus dolor cursus
tortor, vel vulputate dolor sapien sed nulla.</p>
<p>Maecenas posuere, sapien id aliquam convallis, mi ipsum interdum metus, id elementum mi urna
vel
lectus. Cras finibus orci quis tortor facilisis viverra. Sed sed ultrices sem. Etiam
fermentum felis
enim, sed aliquam felis mattis eu. Integer finibus
lorem libero, tristique malesuada mauris feugiat eget. Integer risus metus, lacinia eu augue
sit
amet, lacinia pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
sagittis
aliquet felis, eleifend ultrices risus hendrerit
quis. Nulla laoreet tincidunt elit. Integer accumsan purus lorem, non dapibus odio laoreet
vel.
Proin porttitor est ac sapien ultrices, vitae interdum mi imperdiet. Cras accumsan egestas
augue,
nec ullamcorper dolor commodo eget.</p>
<p>Aliquam suscipit sit amet ex ut tempus. Nullam nec erat tempus, blandit erat at, malesuada
lacus.
Donec interdum ut mauris quis facilisis. Nulla tempor, ipsum id finibus sollicitudin, velit
tortor
convallis dui, in luctus ex lectus eget lorem. Nulla
in quam sed enim consectetur tempus. Maecenas sollicitudin nunc vulputate, pharetra nunc a,
sagittis
lacus. Mauris eget leo felis. Donec scelerisque sapien at turpis eleifend, in imperdiet
magna
congue. Nullam rhoncus sit amet turpis a euismod.
Quisque nisl risus, blandit a fringilla non, cursus sit amet urna. Nulla dolor velit,
lacinia luctus
venenatis sed, imperdiet vitae mi.</p>
<p>Fusce molestie est nisl, vitae viverra massa laoreet a. Nullam eu fringilla libero. In vel
convallis
nisl. Etiam ultricies eu dolor et semper. Sed consequat ultricies lorem at efficitur. Proin
a erat
fermentum, pretium neque eget, lobortis augue.
Morbi sem tortor, blandit sit amet orci eu, fermentum condimentum dolor. Etiam finibus
efficitur
magna in porttitor. Nulla facilisi. Nunc id dapibus urna, eget mattis lorem. Vivamus
placerat justo
in neque malesuada, et mollis mi fermentum. Vivamus
vel luctus orci, eget convallis nisl. Phasellus ultricies tortor elit, ut tempus urna
elementum ac.
Sed aliquam, turpis ac gravida tempor, nunc nulla accumsan eros, eu cursus enim turpis et
massa.</p>
<p>Integer commodo orci vitae fermentum iaculis. Sed efficitur lectus vitae auctor tempus.
Mauris vel
facilisis massa. Duis aliquet tristique feugiat. Nullam ornare pellentesque ultricies. Sed
vestibulum iaculis odio, gravida varius augue aliquam ut.
Ut luctus euismod pretium. Mauris iaculis, est in aliquet molestie, odio turpis sollicitudin
ex, in
venenatis risus leo in mauris. Nullam fringilla pretium massa quis finibus. Fusce
consectetur
aliquet posuere. Aenean at dictum lacus, et hendrerit
augue. Cras rhoncus leo in elit dictum, finibus vulputate lorem euismod. Nunc lorem nibh,
laoreet
non felis non, cursus tincidunt magna. Nulla volutpat eros auctor purus laoreet congue.
Proin in
dictum felis, et dapibus erat. Phasellus ultricies
tortor nisl, sit amet vulputate neque sodales consectetur.</p>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="print-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="footer"><img class="print-footer" src="https://via.placeholder.com/620x60?text=Footer"></div>
我正在使用 HTML、JS 和 CSS 创建一个可打印的网页。每个页面都必须有带有公司品牌的页眉和页脚。但是当我想查看打印预览时，我已经知道了。文本在分页符处溢出了页脚和页眉。
见下图：
下面是我现在的代码：
@media print {
@page {
size: A4;
margin: 1.3cm 2.5cm 0.75cm 2.5cm;
}
* {
margin: 0;
padding: 0;
}
.print-footer {
position: fixed;
display: block;
bottom: 0;
left: 0;
width: 100%;
z-index: -1;
}
.print-body {
margin: 30px 0 30px 0;
}
.print-header {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
}
<div class="visible-print">
<div class="print-header">
<img src="https://via.placeholder.com/300x60?text=Logo">
</div>
<div class="print-body">
<button onclick="window.print()">Print</button>
<div id="print-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie sem tempus mauris mollis aliquet. Sed efficitur sem id ligula rhoncus congue et in massa. Sed in urna metus. Duis ultrices ligula risus, vitae vehicula diam pretium non. Ut
vitae nunc lacinia, scelerisque quam vitae, aliquam lacus. Sed dictum ultricies ornare. Fusce consequat est ac vulputate pulvinar. Donec sed nisi odio. Cras imperdiet ullamcorper pulvinar. Vivamus leo nulla, malesuada id bibendum vitae, ultricies
quis tellus. Quisque congue pulvinar lobortis. Praesent sit amet nibh tristique, dictum nunc id, scelerisque risus. Vivamus interdum metus odio, et dapibus dolor hendrerit ut. Suspendisse non laoreet nisi. Proin at risus vel dolor facilisis dictum.</p>
<p>Donec at diam euismod, imperdiet mauris sed, molestie ante. Ut vehicula neque tellus, id mattis libero commodo id. Sed et semper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam auctor suscipit leo. Mauris egestas lacinia
est. Vestibulum vitae nulla nisi. Phasellus varius diam et turpis commodo iaculis. Aliquam vitae facilisis ligula.</p>
<p>Curabitur id arcu augue. Nullam ac arcu posuere, rutrum nisi vel, finibus metus. Aenean semper sapien a eros condimentum vulputate. Ut ac mattis tortor. Donec libero velit, sodales quis metus id, bibendum eleifend erat. Nam dapibus efficitur dui
id bibendum. Aliquam pretium sodales hendrerit. Fusce commodo urna enim, eget tempus diam ultrices et. Donec egestas augue eget viverra rhoncus. Quisque turpis nibh, vulputate sed velit quis, tempus hendrerit arcu. Aenean nulla purus, dictum rutrum
pretium et, venenatis vel diam. Maecenas auctor ex sit amet leo varius, cursus ultrices urna scelerisque. Nam semper urna nec mi pretium, a aliquet lacus luctus. Curabitur turpis nibh, facilisis ut lobortis sed, suscipit sed ipsum.</p>
<p>Praesent ultricies diam non est posuere, eu commodo metus blandit. In hac habitasse platea dictumst. Aliquam at euismod diam, ut imperdiet lacus. Curabitur ornare quam quis lobortis ultricies. Quisque eget iaculis ante, nec sollicitudin nisi. Proin
metus mi, viverra quis mauris a, tincidunt fringilla velit. Vivamus iaculis eget neque eu feugiat. Nulla tempus convallis turpis ut interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sed accumsan
leo. Sed pharetra malesuada ligula vitae congue. Aenean non erat lobortis, venenatis felis nec, consequat urna.</p>
<p>Nullam vel quam purus. Nullam tempus risus nisi, et consequat nulla semper at. Mauris aliquet dignissim consequat. Integer mollis ante id luctus vestibulum. In hendrerit facilisis mi, at volutpat nibh malesuada ac. Nam finibus fermentum lectus ac
posuere. Pellentesque dapibus mauris eget neque placerat, in tristique dolor convallis. Ut varius euismod elit, eget posuere risus vulputate id. Suspendisse non consectetur neque. Aliquam lobortis augue mi, nec hendrerit neque finibus vitae. Phasellus
ipsum lorem, vehicula et dapibus eu, sollicitudin vitae nibh. Sed mollis, nisl finibus sollicitudin vestibulum, lacus tortor vehicula leo, nec porttitor nibh nulla et lectus. Pellentesque placerat, risus nec hendrerit pulvinar, odio purus pellentesque
odio, et accumsan dui enim id libero. Vivamus varius quam eu interdum porttitor. Nullam in aliquet ipsum.</p>
<p>Etiam interdum ultricies enim non tincidunt. Morbi sapien nulla, aliquet nec dignissim ac, fringilla dictum odio. Nullam interdum interdum urna, in varius risus lobortis vel. Phasellus tempus fringilla urna. Mauris vulputate, purus suscipit ultrices
mollis, massa augue congue leo, eget tempus enim eros in turpis. Vestibulum malesuada consequat dapibus. Quisque suscipit felis nibh, in tincidunt arcu molestie scelerisque. Donec scelerisque, enim sagittis elementum consequat, lacus dolor cursus
tortor, vel vulputate dolor sapien sed nulla.</p>
<p>Maecenas posuere, sapien id aliquam convallis, mi ipsum interdum metus, id elementum mi urna vel lectus. Cras finibus orci quis tortor facilisis viverra. Sed sed ultrices sem. Etiam fermentum felis enim, sed aliquam felis mattis eu. Integer finibus
lorem libero, tristique malesuada mauris feugiat eget. Integer risus metus, lacinia eu augue sit amet, lacinia pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis aliquet felis, eleifend ultrices risus hendrerit
quis. Nulla laoreet tincidunt elit. Integer accumsan purus lorem, non dapibus odio laoreet vel. Proin porttitor est ac sapien ultrices, vitae interdum mi imperdiet. Cras accumsan egestas augue, nec ullamcorper dolor commodo eget.</p>
<p>Aliquam suscipit sit amet ex ut tempus. Nullam nec erat tempus, blandit erat at, malesuada lacus. Donec interdum ut mauris quis facilisis. Nulla tempor, ipsum id finibus sollicitudin, velit tortor convallis dui, in luctus ex lectus eget lorem. Nulla
in quam sed enim consectetur tempus. Maecenas sollicitudin nunc vulputate, pharetra nunc a, sagittis lacus. Mauris eget leo felis. Donec scelerisque sapien at turpis eleifend, in imperdiet magna congue. Nullam rhoncus sit amet turpis a euismod.
Quisque nisl risus, blandit a fringilla non, cursus sit amet urna. Nulla dolor velit, lacinia luctus venenatis sed, imperdiet vitae mi.</p>
<p>Fusce molestie est nisl, vitae viverra massa laoreet a. Nullam eu fringilla libero. In vel convallis nisl. Etiam ultricies eu dolor et semper. Sed consequat ultricies lorem at efficitur. Proin a erat fermentum, pretium neque eget, lobortis augue.
Morbi sem tortor, blandit sit amet orci eu, fermentum condimentum dolor. Etiam finibus efficitur magna in porttitor. Nulla facilisi. Nunc id dapibus urna, eget mattis lorem. Vivamus placerat justo in neque malesuada, et mollis mi fermentum. Vivamus
vel luctus orci, eget convallis nisl. Phasellus ultricies tortor elit, ut tempus urna elementum ac. Sed aliquam, turpis ac gravida tempor, nunc nulla accumsan eros, eu cursus enim turpis et massa.</p>
<p>Integer commodo orci vitae fermentum iaculis. Sed efficitur lectus vitae auctor tempus. Mauris vel facilisis massa. Duis aliquet tristique feugiat. Nullam ornare pellentesque ultricies. Sed vestibulum iaculis odio, gravida varius augue aliquam ut.
Ut luctus euismod pretium. Mauris iaculis, est in aliquet molestie, odio turpis sollicitudin ex, in venenatis risus leo in mauris. Nullam fringilla pretium massa quis finibus. Fusce consectetur aliquet posuere. Aenean at dictum lacus, et hendrerit
augue. Cras rhoncus leo in elit dictum, finibus vulputate lorem euismod. Nunc lorem nibh, laoreet non felis non, cursus tincidunt magna. Nulla volutpat eros auctor purus laoreet congue. Proin in dictum felis, et dapibus erat. Phasellus ultricies
tortor nisl, sit amet vulputate neque sodales consectetur.</p>
</div>
</div>
<img class="print-footer" src="https://via.placeholder.com/300x60?text=Logo">
</div>
如何解决才能使文本不与每页的页眉和页脚重叠？
我找到了解决方案
https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
@media print {
@page {
size: A4;
margin: 1.3cm 2.5cm 0.75cm 2.5cm;
}
* {
margin: 0;
padding: 0;
}
.header,
.print-header-space,
.footer,
.print-footer-space {
height: 100px;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: fixed;
bottom: 0;
}
}
<div class="header"><img src="https://via.placeholder.com/300x60?text=Logo"></div>
<table>
<thead>
<tr>
<td>
<div class="print-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<button onclick="window.print()">Print</button>
<div class="print-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie sem tempus mauris
mollis
aliquet. Sed efficitur sem id ligula rhoncus congue et in massa. Sed in urna metus. Duis
ultrices
ligula risus, vitae vehicula diam pretium non. Ut
vitae nunc lacinia, scelerisque quam vitae, aliquam lacus. Sed dictum ultricies ornare.
Fusce
consequat est ac vulputate pulvinar. Donec sed nisi odio. Cras imperdiet ullamcorper
pulvinar.
Vivamus leo nulla, malesuada id bibendum vitae, ultricies
quis tellus. Quisque congue pulvinar lobortis. Praesent sit amet nibh tristique, dictum nunc
id,
scelerisque risus. Vivamus interdum metus odio, et dapibus dolor hendrerit ut. Suspendisse
non
laoreet nisi. Proin at risus vel dolor facilisis dictum.</p>
<p>Donec at diam euismod, imperdiet mauris sed, molestie ante. Ut vehicula neque tellus, id
mattis
libero commodo id. Sed et semper nunc. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
Nam auctor suscipit leo. Mauris egestas lacinia
est. Vestibulum vitae nulla nisi. Phasellus varius diam et turpis commodo iaculis. Aliquam
vitae
facilisis ligula.</p>
<p>Curabitur id arcu augue. Nullam ac arcu posuere, rutrum nisi vel, finibus metus. Aenean
semper sapien
a eros condimentum vulputate. Ut ac mattis tortor. Donec libero velit, sodales quis metus
id,
bibendum eleifend erat. Nam dapibus efficitur dui
id bibendum. Aliquam pretium sodales hendrerit. Fusce commodo urna enim, eget tempus diam
ultrices
et. Donec egestas augue eget viverra rhoncus. Quisque turpis nibh, vulputate sed velit quis,
tempus
hendrerit arcu. Aenean nulla purus, dictum rutrum
pretium et, venenatis vel diam. Maecenas auctor ex sit amet leo varius, cursus ultrices urna
scelerisque. Nam semper urna nec mi pretium, a aliquet lacus luctus. Curabitur turpis nibh,
facilisis ut lobortis sed, suscipit sed ipsum.</p>
<p>Praesent ultricies diam non est posuere, eu commodo metus blandit. In hac habitasse platea
dictumst.
Aliquam at euismod diam, ut imperdiet lacus. Curabitur ornare quam quis lobortis ultricies.
Quisque
eget iaculis ante, nec sollicitudin nisi. Proin
metus mi, viverra quis mauris a, tincidunt fringilla velit. Vivamus iaculis eget neque eu
feugiat.
Nulla tempus convallis turpis ut interdum. Orci varius natoque penatibus et magnis dis
parturient
montes, nascetur ridiculus mus. Cras sed accumsan
leo. Sed pharetra malesuada ligula vitae congue. Aenean non erat lobortis, venenatis felis
nec,
consequat urna.</p>
<p>Nullam vel quam purus. Nullam tempus risus nisi, et consequat nulla semper at. Mauris aliquet
dignissim consequat. Integer mollis ante id luctus vestibulum. In hendrerit facilisis mi, at
volutpat nibh malesuada ac. Nam finibus fermentum lectus ac
posuere. Pellentesque dapibus mauris eget neque placerat, in tristique dolor convallis. Ut
varius
euismod elit, eget posuere risus vulputate id. Suspendisse non consectetur neque. Aliquam
lobortis
augue mi, nec hendrerit neque finibus vitae. Phasellus
ipsum lorem, vehicula et dapibus eu, sollicitudin vitae nibh. Sed mollis, nisl finibus
sollicitudin
vestibulum, lacus tortor vehicula leo, nec porttitor nibh nulla et lectus. Pellentesque
placerat,
risus nec hendrerit pulvinar, odio purus pellentesque
odio, et accumsan dui enim id libero. Vivamus varius quam eu interdum porttitor. Nullam in
aliquet
ipsum.</p>
<p>Etiam interdum ultricies enim non tincidunt. Morbi sapien nulla, aliquet nec dignissim ac,
fringilla
dictum odio. Nullam interdum interdum urna, in varius risus lobortis vel. Phasellus tempus
fringilla
urna. Mauris vulputate, purus suscipit ultrices
mollis, massa augue congue leo, eget tempus enim eros in turpis. Vestibulum malesuada
consequat
dapibus. Quisque suscipit felis nibh, in tincidunt arcu molestie scelerisque. Donec
scelerisque,
enim sagittis elementum consequat, lacus dolor cursus
tortor, vel vulputate dolor sapien sed nulla.</p>
<p>Maecenas posuere, sapien id aliquam convallis, mi ipsum interdum metus, id elementum mi urna
vel
lectus. Cras finibus orci quis tortor facilisis viverra. Sed sed ultrices sem. Etiam
fermentum felis
enim, sed aliquam felis mattis eu. Integer finibus
lorem libero, tristique malesuada mauris feugiat eget. Integer risus metus, lacinia eu augue
sit
amet, lacinia pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
sagittis
aliquet felis, eleifend ultrices risus hendrerit
quis. Nulla laoreet tincidunt elit. Integer accumsan purus lorem, non dapibus odio laoreet
vel.
Proin porttitor est ac sapien ultrices, vitae interdum mi imperdiet. Cras accumsan egestas
augue,
nec ullamcorper dolor commodo eget.</p>
<p>Aliquam suscipit sit amet ex ut tempus. Nullam nec erat tempus, blandit erat at, malesuada
lacus.
Donec interdum ut mauris quis facilisis. Nulla tempor, ipsum id finibus sollicitudin, velit
tortor
convallis dui, in luctus ex lectus eget lorem. Nulla
in quam sed enim consectetur tempus. Maecenas sollicitudin nunc vulputate, pharetra nunc a,
sagittis
lacus. Mauris eget leo felis. Donec scelerisque sapien at turpis eleifend, in imperdiet
magna
congue. Nullam rhoncus sit amet turpis a euismod.
Quisque nisl risus, blandit a fringilla non, cursus sit amet urna. Nulla dolor velit,
lacinia luctus
venenatis sed, imperdiet vitae mi.</p>
<p>Fusce molestie est nisl, vitae viverra massa laoreet a. Nullam eu fringilla libero. In vel
convallis
nisl. Etiam ultricies eu dolor et semper. Sed consequat ultricies lorem at efficitur. Proin
a erat
fermentum, pretium neque eget, lobortis augue.
Morbi sem tortor, blandit sit amet orci eu, fermentum condimentum dolor. Etiam finibus
efficitur
magna in porttitor. Nulla facilisi. Nunc id dapibus urna, eget mattis lorem. Vivamus
placerat justo
in neque malesuada, et mollis mi fermentum. Vivamus
vel luctus orci, eget convallis nisl. Phasellus ultricies tortor elit, ut tempus urna
elementum ac.
Sed aliquam, turpis ac gravida tempor, nunc nulla accumsan eros, eu cursus enim turpis et
massa.</p>
<p>Integer commodo orci vitae fermentum iaculis. Sed efficitur lectus vitae auctor tempus.
Mauris vel
facilisis massa. Duis aliquet tristique feugiat. Nullam ornare pellentesque ultricies. Sed
vestibulum iaculis odio, gravida varius augue aliquam ut.
Ut luctus euismod pretium. Mauris iaculis, est in aliquet molestie, odio turpis sollicitudin
ex, in
venenatis risus leo in mauris. Nullam fringilla pretium massa quis finibus. Fusce
consectetur
aliquet posuere. Aenean at dictum lacus, et hendrerit
augue. Cras rhoncus leo in elit dictum, finibus vulputate lorem euismod. Nunc lorem nibh,
laoreet
non felis non, cursus tincidunt magna. Nulla volutpat eros auctor purus laoreet congue.
Proin in
dictum felis, et dapibus erat. Phasellus ultricies
tortor nisl, sit amet vulputate neque sodales consectetur.</p>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="print-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="footer"><img class="print-footer" src="https://via.placeholder.com/620x60?text=Footer"></div>