打印时如何使用 CSS 让 div 占据整个 A4 页面？

Question

我已经搞砸了好几个小时了，这让我发疯了。除非我误解了什么，否则这应该很简单：

div.A4.page {
          width: 200mm;
          height: 287mm;
          margin: 0;
          border: 5mm solid red;
          padding: 0;
      }

A4 纸宽 210 毫米，高 297 毫米。所以设置为 200mmx287mm，边框为 5mm，如果我进行打印预览，它应该占据整个页面（在打印对话框中设置为“打印到 PDF”，没有边距）。

但是，由于某种原因，它有点太小了。如果我将边框设置为 10 毫米，那么它看起来足够宽但不够高。

这里发生了什么？我错过了一些明显的东西还是浏览器的实现很糟糕？ （铬）。

任何帮助表示赞赏。

Answer 1

尝试将 box-sizing 属性设置为 content-box

div.A4.page {
          width: 200mm;
          height: 287mm;
          margin: 0;
          padding: 0;
          border: 5mm solid red;
          box-sizing:content-box;
      }

或者

div.A4.page {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          border: 5mm solid red;
          box-sizing:border-box;
      }

但是这可能是您的打印机选项默认设置了一个需要删除的边距，大多数打印机在 A4 页面周围留有边距