如何在每个页面的打印 CSS 中制作页面边框答案

【问题标题】：How to make page border in print CSS for every single page如何在每个页面的打印 CSS 中制作页面边框
【发布时间】：2014-08-13 05:34:23
【问题描述】：

我有一个很长的 HTML 文件要打印。页面已准备好打印，但我需要为每一页加边框。我在 CSS 代码中添加了body { border:2px #666 solid; padding:5px; }。 HTML 视图很好，但打印视图不是。因为border-bottom 没有显示第一页，而border-top 没有显示所有其他页面。

我希望，我可以解释我想要什么。我正在搜索并仍在寻找解决方案。而且我认为这很容易。但还是没有找到。

【问题讨论】：

很久以前，有一个选项叫marks。不幸的是，它已被弃用：developer.mozilla.org/de/docs/Web/CSS/marks

标签： html css print-css

【解决方案1】：

最好的方法是在页面中放置一个固定的div。重要的是你不应该在里面放任何内容。它与多页无缝协作：

<html>
<head>
  <style type="text/css">
    #pageborder {
      position:fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="pageborder">
  </div>
sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>
</body>
</html>

【讨论】：

【解决方案2】：

默认情况下，边框呈现在元素区域的之外。

尝试将其添加到打印 CSS：

body { box-sizing: border-box; border: 10px solid black; }

希望这会有所帮助！

编辑：您也可以尝试使边框更大，并临时添加 !important 到 box-sizing 和边框 CSS。这有时可以帮助我找到问题的根源。

【讨论】：

【解决方案3】：

试试这个它会帮助你：它会在全屏上制作边框。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
  </style>
</head>
<body>
  <div id="wrapper">
  </div>
</body>
</html>

【讨论】：

第一页没问题，但有 3 - 4 页要打印。其他不存在的印刷品。
所以在其他页面上尝试再次添加此代码......详细说明你想要什么
好的，我试过了，解决了我的问题。将#wrapper position:absolute 更改为 position:fixed。感谢您的帮助。
你能支持我的问题吗？他们为什么投反对票，我不明白。