如何在网页打印版中实现无空白边距并保留栏位颜色

要实现打印时两页保留左右栏颜色，同时每页上下都有空白（替代仅首尾生效的padding），可以按以下方式修改代码：

核心思路 #

• 用Flex布局替代浮动实现左右栏，避免浮动在打印分页时的布局异常
• 设置@page的上下边距来控制每页的上下空白，左右边距设为0以保留栏目的全屏背景色
• 让栏目高度随内容自然延伸，而非固定百分比，确保分页时背景色延续到每一页

修改后的CSS代码 #

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Rubik';
    font-size: 10pt;
    display: flex; /* 改用flex布局 */
}

.left-column {
    background-color: blue;
    color: white;
    width: 32%;
    padding: 20px;
    overflow-wrap: break-word;
    min-height: 100vh; /* 确保至少占满一页高度 */
    page-break-inside: avoid; /* 避免栏目内部被分页截断 */
}

.right-column {
    padding: 20px;
    background-color: orange;
    width: calc(100% - 32%);
    min-height: 100vh;
    page-break-inside: avoid;
}

/* 打印专属设置 */
@media print {
    @page {
        size: A4; /* 指定打印尺寸，可选 */
        margin: 1cm 0; /* 上下留1cm空白，左右无空白 */
    }
    
    body {
        width: 100%; /* 确保在打印容器中铺满宽度 */
    }
    
    .left-column, .right-column {
        min-height: calc(100vh - 2cm); /* 减去上下页边距的高度，适配页面 */
    }
}

修改后的HTML代码 #

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
    </head>

    <body>
        <div class="left-column">
            <!-- 这里添加足够多的内容来撑满两页，比如重复的文本 -->
            <p>测试内容</p>
            <p>测试内容</p>
            <!-- 重复多次直到内容超过两页 -->
        </div>
        <div class="right-column">
            <p>右侧测试内容</p>
            <p>右侧测试内容</p>
            <!-- 同样添加足够多的内容 -->
        </div>
    </body>
</html>

关键说明 #

• @page { margin: 1cm 0 } 直接控制打印页面的上下空白，左右设为0让左右栏的背景色完全覆盖页面左右边缘
• Flex布局比浮动更稳定，在打印分页时能保持栏目的对齐关系
• min-height: 100vh 和 page-break-inside: avoid 确保每个栏目在分页时不会被截断，背景色延续到下一页
• 若需要调整上下空白的大小，直接修改@page的margin值即可，无需改动栏目内的padding

内容的提问来源于stack exchange，提问作者user32882