CSS中的页面断点边距

Question

CSS中的页面断点边距

6

我正在制作一个小型个人网站，需要能够打印。该网站结构简单：`body` 作为背景，有一个容器子元素，它有固定的宽度（以及一些样式、填充等），在这个容器内，我有几个部分(`

`)。在打印时，除非必要，否则我不想将这些部分分开（因此，`.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文件中才能正确打印。

编辑：

问题的快速可视化示例。

常规页面，没有换行（预期布局）：

打印时的破碎布局：

- fonix232

从网络上的不同计算机和浏览器中打印内容可能会很困难。您是否尝试将填充或边距应用于 body 元素而不是各个部分？此外，如果有帮助的话，还可以使用 page-break-before 样式。 - Dean

由于不同的纸张尺寸，我宁愿在内容中没有固定的断点，而是在打印过程中动态分配。我也不认为将边距添加到“body”会修复子元素的定位（如果您检查示例代码，您会发现“.container”就像一个实际的可视容器，通过自己的白色背景与灰色背景形成对比，破坏这一点会破坏布局）。 - fonix232

1

将那个小提琴代码复制到问题中的片段中（在编辑时按CTRL-M），以添加一个或单击该图标。 - Mark Schultheiss

谢谢，我已将其添加为内联示例，但这里的打印仍然存在问题 - 要观察到我遇到的效果，您仍需要将代码片段复制到本地HTML文件并从那里打印。 - fonix232

我看到了另一篇帖子，讨论如何缩放一个div以填充纸张，如果您需要缩放前面的部分以填满页面。 https://dev59.com/6VoV5IYBdhLWcg3wGrmI。这可能有助于解决在新页面上已经具有顶部边距的部分的问题。我仍然认为您可以尝试使用body边距来查看是否有助于获得所需内容。 - Dean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gonzo1138 · Answer 1

我在相关上下文这里找到了一个解决方案，它也适用于这种情况。 box-decoration-break:clone 用于在出现换行、分栏或分页时“复制” CSS 属性。而后者就是这种情况，因为 margin 和/或 padding 是被复制的属性之一。（除了 iexplore 以外，它得到了广泛的支持。）

我所要做的就是将该属性添加到我的打印样式表中，以便在每个页面上都有一个固定的标题和重复的主元素填充（即您的 .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;
    }
...
}
...