And*_*rus 5 html css pagination css-position absolute
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>
但是这两行仍然打印在首页上。
有点晚了，但这可能对将来的参考有用：
.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
要进行测试，请选择结果中的文本并打印。