本文介绍了一种解决HTML文件打印时页眉和页脚被内容覆盖的方法。通过CSS样式设置，可以实现页眉和页脚在每个打印页面上的固定位置，同时避免段落与页脚重叠。`page-break-inside: avoid;`属性用于防止段落在页面间断开，确保内容完整性。提供了一个HTML示例文件，展示如何在Firefox和IE中实现该功能，但在Chrome中可能因字体大小调整而失效。
我只是在一天的大部分时间里想出了一个对我有效的解决方案，并认为我会分享我所做的事情。以上解决方案的问题是，我所有的段落元素都会与页面底部我想要的页脚重叠。为了解决这个问题，我使用了以下CSS：footer {
font-size: 9px;
color: #f00;
text-align: center;}@page {
size: A4;
margin: 11mm 17mm 17mm 17mm;}@media print {
footer {
position: fixed;
bottom: 0;
}
.content-block, p {
page-break-inside: avoid;
}
html, body {
width: 210mm;
height: 297mm;
}}
这个page-break-inside为p和content-block对我来说至关重要。任何时候我有一个p跟随h*，我把它们都包在一个div class = "content-block">确保他们呆在一起不要破裂。
我希望有人能找到有用的东西，因为我花了大约3个小时才弄明白(我对CSS/HTML也很陌生，所以.)
编辑
根据注释中的请求，我将添加一个HTML文档示例。您将希望将其复制到HTML文件中，打开它，然后选择打印页面。打印预览应该显示此功能。它在Firefox和IE上都能用，但Chrome使字体足够小，适合在一个页面上，所以它在那里不起作用。
footer {
font-size: 9px;
color: #f00;
text-align: center;
}
@page {
size: A4;
margin: 11mm 17mm 17mm 17mm;
}
@media print {
footer {
position: fixed;
bottom: 0;
}
.content-block, p {
page-break-inside: avoid;
}
html, body {
width: 210mm;
height: 297mm;
}
}
Example Document
Thi
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
