Question

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

我尝试了下面的代码，但第1页和第2页出现在第一页，如果从浏览器打印，则空页结束。如何强制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>

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

Answer 1

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

＆＃13;

.break {
  page-break-after: always;
  position: relative;
}

.absolute {
  position: absolute;
}

＆＃13;

<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>

＆＃13;

工作JSfiddle

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

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

1 个答案: