中断后的div的最后一部分不想占用100%的屏幕高度
中断后的div的最后一部分不想占用100%的屏幕高度
提问于 2018-12-21 17:28:56
我想用Thymeleaf和pdf Saucer将数据打印成Pdf文件。我在div中有一张表。我在同一个div中有一条小消息，它作为页面注释出现在表格的末尾(不是页脚，因为我有一个页脚)。
<div class="bloc">
<table>
</table>
<div class="pageNote">message</div>
</div>下面是我的css代码：
@media print{
html, body{
height:100%;
}
}
div.bloc{
position: relative;
height: 100%;
display: table;
page-break-after: always;
page-break-inside: auto;
}
div.pageNote{
position: absolute;
bottom: 0px;
}当表中的数据很少时，div "bloc“在一个页面上，一切都是正常的，因为它占用了100%的页面。但是，当我们在表格中有许多数据时，div "bloc“高度超过100%，div "bloc”在许多页面上，但最后一页不会占据100%的屏幕，我的消息可以出现在页面的中间。为了解决这个问题，我希望div "bloc“的高度是100%的倍数。根据这个，当我们有多个页面时，div“块”的高度应该是100%，200%，300% ..etc。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-26 21:27:15
经过几次测试后，我通过在div的父类中添加一个带有"page-break- After“类的div来解决这个问题，如下所示：
<div class="bloc">
<table>
</table>
<div class="pageNote">message</div>
<div class="breakafter"/>
</div>下面是我的css代码：
div.bloc{
position: relative;
height: 100%;
display: table;
page-break-after: always;
page-break-inside: auto;
}
div.pageNote{
position: absolute;
bottom: 0px;
}
div.breakafter {
page-break-after: always;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53882218
复制相关文章
相似问题
腾讯云开发者
