【问题标题】：Is there a clean way to do a full page height border for printed pages in CSS?有没有一种干净的方法可以为 CSS 中的打印页面设置完整的页面高度边框？
【发布时间】：2016-01-03 06:19:06
【问题描述】：

我在一个专为 HTML/CSS 打印而设计的页面上做了一些工作，但在尝试创建一个可在多个（打印）页面上以 100% 高度工作的左边框时遇到了障碍。

阅读“How to make page border in print CSS for every single page”后发现最佳答案无效，即使使用position: fixed。我最终放弃并复制了这种方法，但底部属性的负值适当低，在常见用法中不太可能被超越。现在可以使用但不是特别好（您需要打印预览它）：

<html>
<head>
    <style>
    .page-break {
        page-break-after: always;
    }

    #edge {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: -10000mm;
        overflow: visible;
        border-left: 5mm solid #0081CC;
    }

    div {
        padding-left: 5mm;
    }

    </style>
</head>

<body>
    <div id="edge"></div>
    <div>
    Page 1 content
    </div>
    <div class="page-break"></div>
    <div>
    Page 2 content
    </div>
</body>
</html>

所以我现在很好奇是否有一种更简洁（并且更具前瞻性）的方法来实现相同的结果，我得到的最接近的方法是将边框左直接应用于 body 标签，这显然适用于屏幕媒体但是因为打印在内容的末尾停止，所以最后一页被切断了。

从研究看来，到目前为止最干净的方法是使用CSS3 Page-Margin Boxes。遗憾的是，他们甚至还没有得到足够的支持，无法在 caniuse.com 上获得一个页面，而 Mozilla 的实施似乎在 2 年前陷入了困境。 (https://bugzilla.mozilla.org/show_bug.cgi?id=856371)

有没有人有任何可以使这项工作发挥作用的 CSS 魔法？

更新

为了避免混淆，这张图片说明了How to make page border in print CSS for every single page 和https://stackoverflow.com/a/34574001/2823496 中提倡的bottom: 0 方法的问题。

正文框保留内容的尺寸，而不是延伸到页面底部，因此当内容停止时，边框而不是覆盖整个最后一页。

【问题讨论】：

标签： html css printing

【解决方案1】：

利用包装类。它只坚持内容

        .wrapper {
          position: absolute;
          overflow: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border-left: 5px solid red;
        }
      </style>
    </head>
    <body>
      <div class="wrapper">
  Your Content...
      </div>
    </body>

实施：UPADTE

希望对你有所帮助

【讨论】：

我认为这正是stackoverflow.com/a/24361611/2823496 所说的？无论如何尝试一下，但似乎没有用 - 就像你说它围绕内容而不是覆盖整个可打印区域。
在我的假设中可以...打印预览时它已从视口溢出...所以使用具有某些值的边距来细化您的边框视图...例如 body { margin:10px; }...
我不确定我理解你的意思 - 我尝试在正文 css 中添加一个边距，但这并没有改变任何东西，也许你可以编辑你的答案，以便我可以看到它上下文？
嘿，感谢您的更新 - 我仍然不完全确定您的意思是关于您评论中的 CSS 更改，但我已经更新了我的问题以显示我使用您的代码得到的输出以及一般的解决方案，以进一步说明问题。看看你的例子，我相信这个问题会在第 6 页重现。