在使用Thymeleaf导出PDF时，遇到页眉内容与页面主体内容重叠的问题。原因在于CSS打印分页的header不占空间。解决方法是设置内容区域从页眉下方开始，确保页眉空间。通过Thymeleaf的布局指令定义页眉，使用CSS控制页眉高度和页面分页，避免元素被分割。同时，可以使用`white-space`属性处理文本换行，实现理想的效果。
CSS 打印分页功能
需求：打印 在第一页的内容被挤到第二页的时候，又想每一页页头都有相同的样式，使用页眉。
问题：第二页的内容与页眉重叠了？
查各路找出的原因：header 页眉不占空间
解决：不需要写死内容的高度，需要把页眉空间设出来，内容从哪里开始设好
1. Thymeleaf设置页头、页尾
<style>
@page {
@top-center {
content: element(header);
}
}
.header {
position: running(header);
}
</style>在上面的示例中，@page指令用于定义页面布局，@top-center选择器用于指定页眉的位置。content: element(header);表示将名为header的元素内容作为页眉插入到@top-center位置。.header类用于定义页眉的样式，并使用position: running(header);将其与@top-center位置关联起来。
2. 设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<met
最低0.47元/天 解锁文章
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
