Question

我有一个Angular应用程序，完全是一个静态站点。在打印网站时，是否可以在每个起始页面上扩展内容？

我已经设置了一些打印属性，例如

@page {
    size: A5;
    margin: 0mm;
    background: var(--background-color);
}

这些正在工作，但是现在的内容是两个完整的A5尺寸页面，以及第三个部分页面。但是，背景并没有延伸到最后一页。我能以某种方式实现这一目标吗？

编辑：我已经删除了angularjs标签，而是添加了angular标签。

编辑：似乎我在进一步提供代码示例，问题描述得不够好，对此感到抱歉。

因此，我有一个包含结构化内容的网页，可以通过body元素垂直滚动该网页。像这样：

<html>
  <!-- The body can be scrolled vertically, because it has overflow-y: auto, and the content is big enough inside of it, that A5 page size it wouldn't fit. -->
  <body>
    <div class="long-content-element">
      This is a long, and structured content, with lots of text and other sub elements.
      Imagine a looooong Lorem Ipsum or something like that.
    </div>
  </body>
</html>

我有这样的风格：

.long-content-element {
  background-color: magenta;
}

当我按Ctrl + P开始打印时，较长的内容将跨越2个完整的A5页面，因此该页面完全充满了div的洋红色背景，但它也转到了另一个第三页，但是它并没有延伸到页面的末尾，只是，假设有10行会转到该第三页。但是背景颜色不会在此页面上延伸。仅显示在滑到此页面的前10行之后。

我想要的是将整个页面与前两个页面放在相同的背景中。

Answer 1

这可能会帮助您-How to make HTML in A4 size pages

您可以将父div的固定高度设为A4尺寸页面的高度。

打印时如何在整个页面上拉伸内容

1 个答案: