how to force page break between absolutely positioned elements in css

StackOverflow https://stackoverflow.com/questions/20871535

Question

html printing form is designed using absolutely positioned elements. How to force page break between some lines.

I tried code below but page1 and page2 appers in first page and empty pages are at end if printed from browser. How to force page1 and page2 to appear in separate pages ?

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

I also tried to change second page contents to

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

But both lines are still printed in first page.

Was it helpful?

Solution

A little late to the game, but this might be useful for future reference:

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

Working JSfiddle

To test, select the text in the result and print.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top