print css：在 Chrome 的页面底部打印截断答案

【问题标题】：print css: printing cut-off at the bottom of page on Chromeprint css：在 Chrome 的页面底部打印截断
【发布时间】：2021-05-10 23:24:55
【问题描述】：

我在尝试打印时遇到了很大的麻烦：

https://www.sunnysideup.co.nz/test-page

我在 css 中为 HTML / BODY / PAGE 尝试了大量不同的填充和边距组合，但没有任何成功。

这需要一些检查，但你可以看到底部的一些线条被切断了。您可以看到第 2 页和第 3 页被截断。您也可以随意浏览网站上的其他页面，您会看到打印中的页面在底部经常被截断。

如果有帮助，这里是简化的打印 scss：

@page {
    // width: 210mm;
    // height: 297mm;
    margin-top: 20mm!important;
    margin-right: 0!important;
    margin-left: 0!important;
    overflow: visible!important;
    margin-bottom: auto!important;
    // padding-bottom: 4rem!important;
}
@page:first {
    margin-top: 0mm!important;
}
@media print {
    body,
    html {
        overflow: visible!important;
        margin-bottom: auto!important;
        font-size: 10px!important;
        *, *:before {
            color: $colour_black_rock_n_roll!important;
        }

        #main {
            margin-bottom: auto!important;
            overflow: visible!important;
            padding: 1rem 12rem 0 12rem!important;
            * {
                overflow: visible!important;
            }
            &:before {
                display: block;
                background-image: url(./images/SSU_Logo_horizontal_.png)!important;
                background-position: top left;
                background-size: contain;
                height: 100px;
                width: 100%;
            }

            h1, h2, h3, h4, h5, h6 {
                page-break-before: auto;
                page-break-inside: avoid;
                page-break-after: avoid;
                &:before, &:after {
                    display: none;
                }
            }
        }
    }

}

【问题讨论】：

请在打印件上提及页/行/部分。共有 5 页。
@ManasKhandelwal 感谢您的反馈。几乎每一页都被剪掉了。我已经添加了一些关于此的细节。

标签： html css google-chrome printing

【解决方案1】：

@media print {
    .element-you-donnot-want-to-be-cut-off {
        page-break-inside: avoid;
    }
}

为我工作

【讨论】：

【解决方案2】：

在@page上更改margin-bottom：

@page {
      margin-bottom: 30mm !important;
}

在 Codepen 上查看它的实际效果：https://cdpn.io/manaskhandelwal1/debug/QWGNqrP/PBMNWRNoyoJr

【讨论】：

太棒了 - 但你能解释一下为什么这会起作用 - 即我担心它可能会意外工作，但不能在其他页面上工作。另外，使用 mm 或 rem 或其他测量值是否重要？ IE。我想知道为什么是30mm。我试过了，例如：margin-bottom: 10rem，这绝对行不通。
@NicolaasThiemenFrancken 我使用了mm，因为您正在使用它。您可以使用任何单位。首先，尝试给出一个非常高价值的前20rem 或200px 等，这样你就可以看到显着的变化。我已经测试了 px 和 rem 并且它们正在工作。
@NicolaasThiemenFrancken 关于30。我只是通过打击和试验得到它。尝试不同的值，然后使用您发现的最佳值。
我想我所追求的就是把猜测拿出来。在一种情况下它可能适用于 30mm，但我希望它适用于 30mm，因为我明白为什么。
@NicolaasThiemenFrancken mm 和cm 只能用于印刷作品，其他作品使用rem, em, px。