Question

我试图避免在h2元素后出现200px左右的分页符。我知道我可以使用page-break-after: avoid，但我怀疑它可以覆盖200px和doesn't seem to work in chrome，这是我选择的浏览器。

我的方法是将内容的宽度设置为98％，并在其旁边创建一列，该列的高度设置为200px，宽度为1％，并具有page-break-inside: avoid属性。

.main {
  display: inline-block;
  width: 98%;
}

.page-break-indicator {
  display: inline-block;
  vertical-align: top;
  width: 1%;
  page-break-inside: avoid;
  height: 200px;
}

<div class="main">
  <h2>My Header</h2>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, cum nobis nemo voluptatem voluptatum harum odio quo expedita, aliquid natus vitae provident ut in consequuntur, ad quam corrupti? Nam voluptas, non adipisci, aliquid autem sint hic vel dolorum maiores dolore corporis optio quam commodi reprehenderit, cum accusamus explicabo pariatur magnam dolorem. Quos, modi suscipit, facere beatae harum porro rem, odio sunt eaque perferendis minus cupiditate amet reprehenderit in eligendi. Ratione vel corrupti dolores assumenda doloremque ab harum libero nobis dolorum fugiat, optio, alias similique? Exercitationem odit dolores nisi consequatur aut eveniet modi ullam quasi dolor maiores? Odit nemo ipsam aliquam!</div>
</div>
<div class="page-break-indicator"></div>

我多次重复此代码以滚动到新页面，但是遇到了意外问题。如果div.main中的内容移至新页面，则所有内容都将进入下一页。就像display: inline-block也为page-break-inside: avoid;设置div.main一样。知道我在做什么错吗？还是我有更好的方法？

避免在h2元素后分页符200px

0 个答案: