打印 css：在 Chrome 的页面底部打印截止

Question

我在尝试打印工作时遇到了真正的麻烦：

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;
                }
            }
        }
    }

}

Answer 1

更改@page上的margin-bottom ：

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

在 Codepen 上查看它： https://cdpn.io/manaskhandelwal1/debug/QWGNqrP/PBMNWRNoyoJr

Answer 2

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

为我工作