我的页面上有很多内容,但我无法控制它在哪里中断。我在每个页面上使用 position:fixed
作为页眉/页脚放置了一些内容,但它与文本重叠。我尝试通过以下两种方式使用边距和填充来解决重叠问题。
当我使用@page添加边距时
@page { margin: 2cm; }
正如它所说,它适用于每个页面,但我的页眉和页脚也从边距中消失了。
所以我尝试使用 body 标签添加边距
body { margin: 2cm; /* padding: 2cm; */ }
它的工作原理是在第一页上添加 2 厘米的上边距,在最后一页上添加 2 厘米的下边距。但不在页面之间。
是否可以设置每页的边距/填充?
我遇到了完全相同的问题,经过大量搜索后,我发现了一篇有趣的文章,提供了一个组合解决方案,您可以阅读此处。
简而言之,它结合了两种方法:
使用
位置:固定
技术使用
thead tbody tfoot
如果您只使用第一种方法,您将面临重叠问题,同样,如果您只使用第二种方法,页脚将粘在页面内容的底部,可能会在最后一页的开头结束,但是结合使用这两种方法可以解决问题。
在这里您可以看到一个有效的演示。
为确保此解决方案正常工作,请尝试按
Print Me!
按钮进行打印。您甚至可能需要在页脚中添加页码,这也是由CSS完成的,您只需要添加以下 CSS:
在一些文章中,它是
内容: counter(page) " of " counter(pages);
,但是在我的例子中,pages
无缘无故一直返回0,所以我忽略了它,也许你可以实现计数使用 CSS var() 计算总页数。郑重声明,如果您不想在打印前观察页眉和页脚,可以添加以下 CSS:
2020 年更新:
页码似乎不再起作用了。