多页HTML打印Div重叠问题求助：@media print CSS优化与替代方案咨询

一、解决Div重叠的可靠布局方案 #

当前Flex布局在打印场景下的分页兼容性不足，结合你遇到的问题，推荐两种更稳定的方案：

1. Grid布局方案（现代浏览器优先） #

替换原有Flex布局，Grid对打印分页的控制更精准，同时去掉固定高度避免内容截断重叠：

@media print {
    /* 保留原有基础样式，修改以下核心布局代码 */
    html, body {
        margin: 0;
        color: #000;
        background-color: #fff;
    }

    ul.leaders li:after {
        content: "";
        display: block;
        overflow: hidden;
        height: 16px;
        border-bottom: 1px dotted;
    }
    .pageContainer {
        position: relative;
        width: 100%;
        height: auto; /* 移除固定高度，让内容自适应 */
    }
    .pageContent{
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 平均分配两栏 */
        gap: 20px; /* 用gap替代左右padding控制栏间距 */
        page-break-after: always;
        clear: both;
    }
    .columnLeft, .columnRight {
        width: auto; /* 移除固定宽度，由Grid自动分配 */
        height: auto; /* 移除固定高度 */
        padding: 0; /* 取消左右padding，避免布局偏移 */
    }
    .phDirRight, .phDirLeft{
        font-size: 16px;
    }
    .footer {
        position: fixed; /* 固定在每页底部，避免与内容重叠 */
        bottom: 10px;
        width: 100%;
        text-align: center;
    }
    .pageBreak {
        display: block; 
        page-break-after: always;
    }
    /* 新增：避免内容块被分页截断 */
    .phWrap, .columnTxt, ul.leaders {
        page-break-inside: avoid;
    }
}

2. Table布局方案（兼容性拉满） #

Table是打印场景下最稳定的布局方式，适合结构化的目录内容：

修改HTML结构：

<!-- ko if: $root.selectedMode() === 'view phone' -->
<div class="pageContainer">
    <table class="pageContent">
        <tr>
            <td class="columnLeft">
                <!-- 原columnLeft内的所有内容 -->
                <div data-bind="foreach: $root.page1Leader">
                    <!-- 省略原有绑定内容 -->
                </div>
            </td>
            <td class="columnRight">
                <!-- 原columnRight内的所有内容 -->
                <div id="emergencyInfo">
                    <!-- 省略原有紧急信息内容 -->
                </div>
                <div data-bind="foreach: $root.page1Right">
                    <!-- 省略原有绑定内容 -->
                </div>
            </td>
        </tr>
    </table>
    <div class="footer" data-bind="text: $root.footer1"></div>
</div>
<!-- /ko -->

对应打印CSS：

@media print {
    /* 保留原有基础样式，修改以下核心布局代码 */
    .pageContainer {
        position: relative;
        width: 100%;
        height: auto;
    }
    .pageContent {
        width: 100%;
        border-collapse: separate;
        border-spacing: 20px 0; /* 控制两栏间距 */
        page-break-after: always;
    }
    .columnLeft, .columnRight {
        vertical-align: top; /* 确保两栏内容顶部对齐 */
        width: 50%;
        height: auto;
        padding: 0;
    }
    .footer {
        position: fixed;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }
    .phWrap, .columnTxt, ul.leaders {
        page-break-inside: avoid;
    }
    /* 其他原有样式保留 */
}

二、打印预览中查看CSS代码的方法 #

Chrome和Edge都支持直接调试打印样式：

• 打开打印预览（Ctrl+P）
• 右键点击预览页面，选择「检查」
• 在开发者工具的「更多工具」中打开「渲染」面板
• 勾选「模拟CSS媒体类型」里的「print」，此时就能看到当前生效的所有打印CSS，包括DNN更新后注入的样式，方便排查冲突。

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