更新

Question

我一直在专门为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>

所以我现在很好奇，如果有更清洁（以及更多未来证明）的方法来实现相同的结果，我得到的最接近的是将一个边框左边的直接应用于身体标签，这显然适用于屏幕媒体但是对于内容末尾的打印停止，所以最后一页被切断。

从研究来看，迄今为止最干净的方法似乎是使用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方法的问题。

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

Answer 1

使用包装类。它只坚持arond内容

        .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

希望得到帮助

是否有一种干净的方法可以在CSS中为打印页面创建整页高度边框？

更新

1 个答案: