如何让HTML简历模板打印时最后一页铺满整个A4纸？

我完全懂你遇到的困扰——屏幕上简历排版好好的，但打印到最后一页时，内容只占了一部分，剩下的A4空白区域看着特别突兀，对吧？咱们来快速搞定这个问题。

问题根源 #

你当前的CSS里虽然设置了height: 100%，但在打印的特殊渲染逻辑里，body的100%高度没有正确继承到页面的实际可用高度；而且你的resume-container没有设置和A4页面匹配的最小高度，导致内容较少时，容器只会跟着内容的高度走，不会自动撑满A4的可用空间。

解决方案：调整CSS撑满打印页面 #

我们需要给页面根元素补全高度继承，同时给简历容器设置和A4可用区域一致的最小高度，具体修改后的完整代码如下：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>

<style>
    /* 给根元素设置高度，让body的100%高度有父级参考 */
    html {
        height: 100%;
    }

    @page {
        size: A4;
        margin: 20mm;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .resume-container {
        width: 21cm;
        /* 计算A4可用高度：总高度297mm减去上下各20mm的边距 */
        min-height: calc(297mm - 40mm);
        display: flex;
        margin: 0 auto;
        background-color: #fff;
    }

    .left-panel {
        width: 7.24cm;
        background-color: var(--left-panel-background-color);
        color: #fff;
        /* 让左侧面板跟着容器撑满高度 */
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .right-panel {
        width: 13.76cm;
        background-color: #fff;
        /* 让右侧面板跟着容器撑满高度 */
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    @media print {
        body, html {
            height: 100%;
            overflow: hidden; /* 避免打印时出现多余滚动条 */
        }
        .resume-container {
            /* 打印时强制容器撑满可用高度 */
            height: calc(297mm - 40mm);
            page-break-inside: avoid; /* 防止简历容器被意外分页 */
        }
    }
</style>

<body>
<div class="resume-container">
    <div class="left-panel">
        <!-- left side content goes here -->
    </div>
    <div class="right-panel">
        <!-- right side content goes here -->
    </div>
</div>
</body>
</html>

关键修改点说明 #

1. 给html设置height:100%：解决body的height:100%没有父级高度参考的问题，让高度继承链完整。
2. resume-container的min-height/height：用calc精确计算出A4页面减去边距后的可用高度，确保内容较少时容器也能撑满页面。
3. 左右面板的flex:1：让左右两个面板跟着容器一起撑满高度，避免面板本身高度不够的问题。
4. 打印媒体查询的优化：page-break-inside: avoid防止简历被无端分页，overflow: hidden避免打印时出现不必要的滚动条。

如果调整后还有小问题，可以试试把resume-container的height和min-height都保留，或者检查一下是否有其他元素的margin/padding干扰了高度计算。

备注：内容来源于stack exchange，提问作者Ali Asjad