浏览器打印边距，默认/无边距，占满1页A4

长页面打印的时候，分页是通过给每页内容的外层div设置高度实现的，以达到一页内容刚好占据1页A4纸。
（至少我遇到的情况是这样）
但是，如何设置宽高以及边距，真是个讲究活。

1 设置宽高为210mm*297mm

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 210mm;
            height: 297mm;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

210*297mm是A4纸的尺寸，但是如果加上打印默认的边距，效果就有点不对劲了。
在这里插入图片描述
如果这个边距不是必要的，那么可以考虑去掉边距。

@media print { // 媒体查询，打印时样式生效，不用也可以
    @page { // 用于在打印文档时修改某些 CSS 属性
        margin: 0;
        }
    }
}
1
2
3
4
5
6

在这里插入图片描述
或者打印设置里改成无边距（不推荐这种办法，需要客户多干一个步骤，不如设置css直接）

如果一定要边距，那么设置宽高的时候，就把边距减掉。

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 190mm;
            height: 277mm;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 10mm;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在这里插入图片描述
细看其实分页有一丝丝错位，不知道为啥。
以及，既然在css中设置了边距，就不要去调整浏览器打印边距，样式会乱。

设置宽高为`a:b`px

在无边距时，这个`a:b`=`210:297`就能达到占满a4纸的效果了

（其实就是a4纸的比例了）

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 1024px;
            height: 1448px;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 0mm;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

1024:1448差不多就是A4纸的比例了。
在这里插入图片描述

无边距时，宽高比需要调试。

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 1024px;
            height: 1471px;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 20px;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

1024:1471是调整出来的，我也不知道要怎么算。
在这里插入图片描述

相关阅读:
剑指offer(C++)-JZ53：数字在升序数组中出现的次数(算法-搜索算法)
Java匿名内部类解析
 seata分布式事务理论概述
 MongoDB CRUD操作：可重试写入
 dayjs 笔记
 【计算机毕业设计】206校园顺路代送微信小程序
 微服务 Spring Cloud 8，开源RPC框架如何选型？
TS泛型的使用
 关于开展2022年江苏省重点领域首版次软件产品征集工作的通知
 【雷达】线性调频脉冲雷达仿真实验附matlab代码
原文地址：https://blog.csdn.net/weixin_43915401/article/details/125562893