CODEWITHSUNDEEP
cssprintingpretty-printpage-break
Makrel
Makrel

Reputation: 21

CSS page-break-after creeps after a few pges

I have block elements (DIVs) that have page-break-after on them in print media. The issue is that break migrates up so there IS a page-break but the page height seems mismatched and the div starts straddling the page break in the print preview. This is primarily a problem in chrome.

The DIVs have this class in the print.css so that I get a page break after each section.

.breakSection {
    display: block !important;
    width: 100% !important;
    min-height: 100px !important;
    page-break-after: always !important;
}

Upvotes: 1

Views: 338

Answers (2)

Vincent
Vincent

Reputation: 2159

You will also want to set the margin to 0 when printing. This will keep the page sizes and page breaks consistent.

@media print{body{margin:0}}

Upvotes: 0

Noneleft
Noneleft

Reputation: 1

Have you tried doing it the other way around ?

page-break-before: always;

You can't always know where the page will end, but you can decide where it will start and let it end naturally.

Upvotes: 0

Related Questions