Javascript 如何在打印时使用分页符和避免空白将我的div拆分为多页？

在我的页面上，我从数据库中加载了一些内容。所有这些内容都放在一个DIV中，与图像、字体样式和背景图像完美地结合在一起。我希望访问者能够打印此内容而不丢失样式

除了分页符外，我一切都很顺利。不知何故，无论我尝试什么，在每个div下面总是有一个小的空间，这使得我的div结果的位置比它之前的位置低很多。换句话说：页面的内容越多，DIV就越被切成两半并显示在下一页上。有关我的问题的说明，请参见下文

CSS

@media all {
.page-break { 
    display: none; 
}

.wrapper_programmaker:after {
  padding-top: 70.71%;
  display: block ;
  content: '';
}
}

@media print {
.page-break { 
    display:inline-block; page-break-after: always;
}

.wrapper_programmaker:after {
  padding-top: 70.71%;
  margin-bottom: -0.9%;
  display:block;
  content: '';
}
}

.main_programmaker {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: #282828;
  font-family: 'Frutiger', sans-serif;
}

function printDiv(printableArea) {
    var printContents = document.getElementById('printableArea').innerHTML;  
    var originalContents = document.body.innerHTML;       
    document.body.innerHTML = printContents;      
    window.print();      
    document.body.innerHTML = originalContents;
}

PHP

<div id="printableArea">
  <? mysqli_fetch_array { ?>
    <div class="wrapper_programmaker">
      <div class="main_programmaker" style="background-image:url(../images/BG.jpg); background-repeat:no-repeat; background-size:contain;">

        //way more divs and content that are irrelevant for this question

      </div>
    </div>
  <? } ?>
<div classs="page-break"></div>
</div>

我的问题的图像示例：

---

一件事是，在设置分页类的div中有一个输入错误。您有classs=“page break”，它应该是class=“page break”谢谢，但这只是这里，它不在我的原始代码中。一件事是，您在设置分页类的div中有一个输入错误。您有classs=“page break”，它应该是class=“page break”谢谢，但这只是这里，所以，它不在我的原始代码中。