分页符上的 CSS 边距

Question

我正在开发一个小型个人网站，该网站也需要可打印。该网站本身的结构很简单：

body

用作背景，有一个具有固定宽度（以及一些样式、填充等）的单个容器子项，在这个容器内，我有几个部分（

 <div class="section">

）。在打印过程中，除非有必要，否则我宁愿不要分解这些部分（因此，

.section

有一个样式添加

page-break-inside: avoid;

）。显然，如果这样的部分无法放入单个页面，它将在内部有一个分页符，但否则会将元素滑动到下一页。

这部分工作正常，但是在分页之后，我仍然希望下一个元素与其默认边距正确对齐到页面顶部。但这并没有发生。每当我准备打印时，被推到下一页的

.section

元素顶部的边距就会消失 - 即使它不应该消失，除非我对分页符和边距的理解不正确（可能是这种情况）。

我准备了一个小例子：

body {
  background: none repeat scroll 0 0 #eee;
  margin: 0;
  color: #4a4a4a;
  display: block;
}

.container {
  margin: 16px auto;
  padding: 2.5% 0;
  max-width: 200mm;
  line-height: 1.1;
  border-radius: 16px;
  background-color: #fff;
  color: #fff;
}

.container>.section {
  padding: 3%;
  margin: 5% 2.5%;
  min-height: 500px;
  border-radius: 16px;
  box-shadow: 0px 4px 8px 0px #AA888888;
}

.container>.section:first-of-type {
  margin-top: 0%;
}

.container>.section:last-of-type {
  margin-bottom: 0%;
}

.section-red {
  background-color: #f44336;
  background-repeat: repeat;
}

.section-green {
  background-color: #8bc34a;
  background-repeat: repeat;
}

.section-blue {
  background-color: #03a9f4;
  background-repeat: repeat;
}

.section-yellow {
  background-color: #c0ca33;
  background-repeat: repeat;
}

.section-orange {
  background-color: #ffb300;
  background-repeat: repeat;
}

.section-pink {
  background-color: #e91e63;
  background-repeat: repeat;
}

.section-purple {
  background-color: #9c27b0;
  background-repeat: repeat;
}

.font-size-large {
  font-size: 14px !important;
}

.font-size-xlarge {
  font-size: 18px !important;
}

@media print {

    body {
        width: 210mm;
    }

    .container {
        max-width: 90%;
        min-width: 0;
        margin: 5mm auto 200mm;
    }

    .container > .section {
        page-break-inside: avoid;
        margin-top: 8px;
    }

    .container > .section > section {
        page-break-inside: avoid;
    }
}

<html>

  <head>

  </head>

  <body>

    <div class="container font-size-large">
      <div class="section section-red">
      </div>
      <div class="section section-blue">
      </div>
      <div class="section section-green">
      </div>
      <div class="section section-purple">
      </div>
      <div class="section section-orange">
      </div>
    </div>

  </body>

</html>

不过，您可能需要将其复制到本地 HTML 和 CSS 文件才能正确打印。

编辑：

问题的快速视觉示例。

常规页面，无间断（预期布局）：

打印期间布局损坏：

Answer 1

我从相关上下文中找到了一个解决方案here，它也适用于这种情况。 box-decoration-break：克隆用于在发生行、列或分页时“复制”CSS 属性。后者就是这里的情况，scence margin 和/或 padding 是复制的属性之一。（除了 iexplore 之外，它得到了广泛的支持。）

我所要做的就是将该属性添加到我的 print-css 中，以便在每个页面上都有一个固定的标题和主元素（这将是您的 .container）的重复填充：

@media print {

    header {
        display: flex;
        flex-flow: wrap;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    main{
        padding: 4cm 2cm 2cm 2cm;
        box-decoration-break: clone;
    }
...
}
...

Answer 2

我相信我已经找到了一种可靠的方法来使用无头镀铬基于

<div>

的布局来做到这一点。（基于表格的布局略有不同）

问题是，当您向 div 添加边距并将其

breaks

添加到下一页时，由于盒模型的行为方式，边距不会应用到顶部。并且填充仅在内部应用，所以你最终会得到这样的结果：

我想要的是wrapped-div上方的空间，正如你所描述的。好吧，解决方法是将容器包装在另一个 div 中，然后向该元素添加一些填充，最终会得到这样的结果：

顺风时，这就像

<div class="pt-4 first:pt-0">

一样简单

非常整洁！

分页符上的 CSS 边距

问题描述投票：0回答：2

2个回答

最新问题

分页符上的 CSS 边距

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2