打印css:在Chrome浏览器页面底部的打印截止

Question

我有真正的麻烦，试图让打印工作:

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

我在css中尝试了大量不同的HTML/BODY/PAGE的填充和边距组合，但没有任何成功。

这需要一些检查，但是你可以看到一些行在底部被切断了。你可以看到第二页和第三页被剪掉了。你也可以随意浏览网站上的其他页面，你会看到打印页面的底部经常被截断。

如果有帮助的话，下面是简化的打印字体:

@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

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

Works for me

Answer 2

在@page上更改margin-bottom:

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

在Codepen上看到它的作用:https://cdpn.io/manaskhandelwal1/debug/QWGNqrP/PBMNWRNoyoJr