打印页面时，页眉在3,4页后向上移动

如何解决打印页面时，页眉在3,4页后向上移动

我不知道如何解释这个问题。在我的html网页中，数据在每个页面中完美显示。当我尝试在初始页面中打印时，数据表适合页面内部，但是在2,3页之后，页眉就会向上移动。为了更清楚，我将发布以下图像。 我在同一个表中循环使用不同的数据。 第一页

第三页

在页面末尾，它像这样显示

我的CSS代码：

<style>

.verticaltext{
    writing-mode: vertical-rl;
    transform:scale(-1);
}


page {
    background: white;
    display: block;
    margin: 0 auto;
/*  margin-bottom: 0.5cm; */
    box-shadow: 0 0 0.5cm rgba(0,0.5);
}

page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
}

page[size="A4"][layout="landscape"] {
    width: 29.7cm;
    height: 21cm;
}

.table-wtotbr {
     
    width: 100%;
}

.table-wtbr {
    width: 100%;
}

.table-wtotbr th,td {
    border-bottom: 1px solid black;
}

.table-wtbr th,td {
    border: 1px solid black;
}

.container-table {
    color: black;
    width: 100%;
    height: 99% !important;
    font-size: 11px;
/*  border: 2px solid red; */
}

.footer {
    position: fixed;
    bottom: 0;
    width: 95%;
}

.checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    display: inline-block;
}
</style>


<style type="text/css" media="print">
@media print {
    html,body {
/*          border: 5px solid red;  */
        color: black;
        margin: 2px !important;
        padding: 0px !important;
        
        width: 100% !important;
        height: 100vh !important;
        /*      overflow: hidden !important;   */
        font-size: 15px;
    }
    @page {
        page-break-inside: avoid;
        size: A4 landscape;
        margin: 0 !important;
        height: 99% !important; 
    }
    .footer {
        display: table-cell;
        vertical-align: bottom;
    }
    .container-table {
    border: 5px solid red;
        overflow: hidden !important;    
        color: black;
        width: 99% !important;
        font-size: 11px;
    }
}
</style>

有人可以帮我吗？预先谢谢你。

解决方法

我通过在容器div中添加以下代码解决了该问题。

    .container-table {
        page-break-inside: avoid;
        page-break-before: avoid;
        page-break-after: avoid;
        height: 99% !important;
        padding-top:10px;
        /*  border: 5px solid red; */
        /*      overflow: hidden !important;     */
        color: black;
        width: 99% !important;
        font-size: 11px;
    }