CODEWITHSUNDEEP
htmlcssgoogle-chromeprinting
Nicolaas Thiemen Francken
Nicolaas Thiemen Francken

Reputation: 311

print css: printing cut-off at the bottom of page on Chrome

I am having real trouble trying to get printing to work:

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

I have tried tons of different combinations of padding and margin for HTML / BODY / PAGE in the css, but without any success.

It takes a bit of checking, but you can see some of the lines are cut off at the bottom. You can see that page 2 and 3 are cut off. Feel free to explore other pages on the site too, you will see that pages in print are regularly cut-off at the bottom.

Here is the simplified print scss if that helps:

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

}

Upvotes: 0

Views: 4554

Answers (2)

namti
namti

Reputation: 71

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

Works for me

Upvotes: 3

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

Change the margin-bottom on @page:

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

See it in action on Codepen: https://cdpn.io/manaskhandelwal1/debug/QWGNqrP/PBMNWRNoyoJr

Upvotes: -1

Related Questions