如何在css中的绝对定位元素之间强制分页

Posted 2023-03-10

技术标签:

【中文标题】如何在css中的绝对定位元素之间强制分页【英文标题】：how to force page break between absolutely positioned elements in css 【发布时间】：2014-01-19 05:27:16 【问题描述】：

html 打印表单是使用绝对定位元素设计的。如何在某些行之间强制分页。

我尝试了下面的代码，但 page1 和 page2 出现在第一页中，如果从浏览器打印，则空页结束。如何强制 page1 和 page2 出现在不同的页面中？

<!DOCTYPE html>
<html>
<head>

<style>
  div 
    position: absolute;
  

    @page 
      visibility: hidden;
      margin: 0 15px;
      height: auto;
    

    .break 
      page-break-before: always;
    
</style>
</head>

<body>
  <div class='break'></div>
<div style='top:11.58cm;'>page1</div>
  <div class='break'></div>
<div style='top:13.35cm;'>page2</div>
</body>
</html>

我还尝试将第二页内容更改为

<div  class='break' style='top:1cm;'>page2</div>

但是这两行仍然打印在第一页。

【问题讨论】：

如果你想让一个元素向下推另一个元素，你不应该使用绝对定位。报告包含多个文档，其布局是使用绝对定位创建的。布局是通过使用鼠标定位元素在视觉表单设计器中设计的。每份文件都应该从新的一页开始打印。如何实现？如果您将absolute 更改为relative 或static，则分页符工作。这看起来是否正确取决于您进行调整。报告专为最终用户的绝对布局而设计。我在运行时不认识它们，无法更改。也许可以创建大约 50 列的 css 网格或 html 表格元素，将 div 放入此网格列或使用画布元素或其他解决方案？ @tester 也许可以将绝对元素放入相对 div 中，如css-tricks.com/absolute-positioning-inside-relative-positioning中所述 【参考方案1】：

游戏有点晚了，但这可能对将来的参考有用：

.break 
  page-break-after: always;
  position: relative;


.absolute 
  position: absolute;

<div class='break'>
  <div class="absolute" style='top:11.58cm;'>page1</div>
</div>
<div class='break'>
  <div class="absolute" style='top:13.35cm;'>page2</div>
</div>

工作JSfiddle

要测试，请选择结果中的文本并打印。

【讨论】：

我发现我必须给 div.break 一个（隐藏的）边框才能让它工作。

以上是关于如何在css中的绝对定位元素之间强制分页的主要内容，如果未能解决你的问题，请参考以下文章

CSS绝对定位与相对定位的区别？

HTML+CSS：css定位详解之相对定位绝对定位和固定定位