html - 固定每个打印页面上的页眉，并避免页脚内部出现分页符

Question

我的页面中有三个Div，类为invoiceHeader、invoiceBody 和invoiceFooter。我想在每个打印页面上重复第一个 div (.invoiceHeader)，并且我想避免在打印时在第三个 Div (.invoiceFooter) 内部分页，页面上将没有页脚。我怎样才能做到这一点？

标签： htmlheaderpage-break-inside

Answer 1

以下代码可以帮助您作为粘性页眉和页脚进行打印

@media print { 
    .centerDiv{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;    
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    } 

}