当前位置：网站首页>浏览器打印边距，默认/无边距，占满1页A4

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

2022-07-06 09:28:00 【梦想身高1米8】

长页面打印的时候，分页是通过给每页内容的外层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>

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

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

在这里插入图片描述
或者打印设置里改成无边距（不推荐这种办法，需要客户多干一个步骤，不如设置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>

在这里插入图片描述
细看其实分页有一丝丝错位，不知道为啥。
以及，既然在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>

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>