Margin with CSS on page breaks
Question
I'm working on a small personal website that also needs to be printable. The site itself is structured in a simple way: body serves as a backdrop, has a single container child that has a fixed width (and some styling, padding, etc.), and within this container, I have several sections ( <div class="section"> ). During print, I'd rather not break up these sections, unless necessary (thus, .section has a style addition page-break-inside: avoid; ). Obviously if such a section cannot fit into a single page, it will have a page-break on the inside, but otherwise will slide the element to the next page.
This part is working fine, however after a page break, I'd still like the next element to align properly to the page top, with its default margin. But this is not happening. Whenever I prepare for a print, the margin on top of .section elements that get pushed to the next page disappear - even though it shouldn't, unless my understanding of page breaks and margins is incorrect (which might be the case).
I've prepared a small example:
body { background: none repeat scroll 0 0 #eee; margin: 0; color: #4a4a4a; display: block; }.container { margin: 16px auto; padding: 2.5% 0; max-width: 200mm; line-height: 1.1; border-radius: 16px; background-color: #fff; color: #fff; }.container>.section { padding: 3%; margin: 5% 2.5%; min-height: 500px; border-radius: 16px; box-shadow: 0px 4px 8px 0px #AA888888; }.container>.section:first-of-type { margin-top: 0%; }.container>.section:last-of-type { margin-bottom: 0%; }.section-red { background-color: #f44336; background-repeat: repeat; }.section-green { background-color: #8bc34a; background-repeat: repeat; }.section-blue { background-color: #03a9f4; background-repeat: repeat; }.section-yellow { background-color: #c0ca33; background-repeat: repeat; }.section-orange { background-color: #ffb300; background-repeat: repeat; }.section-pink { background-color: #e91e63; background-repeat: repeat; }.section-purple { background-color: #9c27b0; background-repeat: repeat; }.font-size-large { font-size: 14px;important. }:font-size-xlarge { font-size; 18px:important; } @media print { body { width. 210mm: };container { max-width: 90%; min-width: 0; margin. 5mm auto 200mm. }:container >;section { page-break-inside: avoid; margin-top. 8px. }:container >;section > section { page-break-inside: avoid; } }
<html> <head> </head> <body> <div class="container font-size-large"> <div class="section section-red"> </div> <div class="section section-blue"> </div> <div class="section section-green"> </div> <div class="section section-purple"> </div> <div class="section section-orange"> </div> </div> </body> </html>
You might need to copy it to a local HTML and CSS file to have it printed properly, though.
EDIT:
Quick visual example of the issue.
Regular page, no breaks (expected layout):
Broken layout during print:
1 answers
solution1
0 2022-02-14 11:34:47
I've found a solution from a related context here , that works for this scenario aswell. box-decoration-break :clone is used to "copy" css-attributes when a line-, column or page-break occures. And the latter is the case here, scince margin and/or padding are among the copied properties. (It's widely supported except of iexplore.)
All I had to do was adding that property to my print-css, to have a fixed header an a repeating padding for the main-element (that would be your.container) on every page:
@media print {
header {
display: flex;
flex-flow: wrap;
position: fixed;
top: 0;
left: 0;
right: 0;
}
main{
padding: 4cm 2cm 2cm 2cm;
box-decoration-break: clone;
}
...
}
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.