Menu
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:
301
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;
}
...
}
...
answered Aug 12 '26 11:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With