Header and footer problems in report with mPHP

Question

I’m taking a look at mPHP to learn how to make reports with PHP, due to a case that occurred in my work, now I want to take care and learn how to use such tool, but I’m having problems(I tried to do similar to the work).

I can not put header and footer in the form, I tried several ways I saw on the internet, but nothing worked.

I wonder if someone could help me?

Each variable that I put here is in the same file, I will only separate to facilitate the visualization.

Code:

CSS:

$css="
    @page {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }



    #cabecInicial{
        font-family: 'Century Gothic';
        color: #3864B2;
        background-image: url('imgs/cabecalho_relatorios_1_grande.png');
        background-position: right top;
        background-repeat: no-repeat;
        background-size: 70% 120%;
        background-color: #efefef;
        height: 160px;
        width: 100%;
    }

    #corpoCabecInicial{
        height: 115px;
        width: 100%;
        float: left;
        margin-top: 15px;
    }

    #dadosCabec {
        float: left;
        margin-left: 15px;
        width: 430px;
    }



    #corpoRelatCompleto{
        height: auto;//100%;//200px
        width: 100%;//1035    
        margin:0 auto;
    }

    .esquerdaEspaco10 {
        padding-left: 5px;
    }

    .subtitulo{
        font-weight: bolder;
        vertical-align: top;
    }

    .apertoDeMao{
        width: 154px;
    }


    .apertoDeMaoMini{
        float: left;
        width: 78px;
        margin: 8px;
    }

    #infoCabecInicial {
        vertical-align: bottom;
        font-size: 12px;

    }

    #obsCabec{
        opacity: 0.7;
        background: #144385;
        padding-left: 10px;
        padding-right: 5px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 20px;
        margin-top: 5px;
        margin-right: 20px;
        width: 230px;
        height: auto;
        color: #fff;
        float: right;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 3px -4px 3px 0px #336abd;
    }

    .textoFooter {
        margin-top: 20px;
        padding-right: 15px;
        float: right;
        color: #ffffff;
    }

    .footer {
        background: url('imgs/footerGambi.png');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 50px;
        text-align: right;
        clear: both;
        //page-break-after:always;
        //position: fixed;
    }

    .basicHeader {
        background-image: url('imgs/cabecalho_relatorios_1.png');
        background-position: right top;
        background-repeat: no-repeat;
        background-size: 70% 180%;
        background-color: #efefef;
        width: 100%;
        height: 70px;
        clear: both
        font-size: 12px;
        float: left;
        position: fixed; top: 0px;//page-break-after:always;
    }

    .textoCabecGeral {
        float: left;
        font-size: 26px;
        color: #3864B2;
        width: 500px;
    }

    #corpoRelat {
        margin-top:65px;
        font-family: 'Tw Cen MT';
        font-size: 12.0pt;
    }

    .indice {    
        font-size: 22pt;
        border-bottom: 1px double;
        padding-bottom: 5px;
    }

    .numeroIndice {
        padding-right: 15px;
    }

    .subIndice {
        font-weight: bolder;
    }

    .tabelaSistema {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 35px;
    }

    .tabelaSistema td{
        border: 1px solid #000000;    
    }

    .tabelaSistema th{
        border: 1px solid #000000;    
    }

    .tabelaSistema .tdLess {
        width: 15%;
        text-align: center;
    }

    .tabelaSistema .first {
        text-align: left;
        padding-left: 15px;
    }

    #cabecTable {
        width: 100%;
    }

</style>"    

;

footer:

$footer = '

            <div class="footer">
                <div class="textoFooter">
                    ********
                </div>
            </div>

    ';

header:

$header = '

        <div class="basicHeader">
            <table>
                <tbody><tr>
                    <td><img src="./2016.07.12 relato_de_------.pdf_files/maoGambi.png" class="apertoDeMaoMini"></td><td>
                    </td><td><!-- textoCabecGeral-->
                        <div class="textoCabecGeral subtitulo">
                            RELATO DIÁRIO
                            <br>-------
                        </div>
                    </td><td>
                </td></tr>
            </tbody></table>


            </div>
        </div>

front page header:

$firstCabec = '

    <div id="cabecInicial">

        <div id="corpoCabecInicial">

                    <div style="height: 23px;"></div>

                        <div id="dadosCabec">
                            <table>
                                <tbody><tr>
                                    <td rowspan="2">
                                        <img src="./2016.07.12 relato_de_----.pdf_files/maoGambi.png" class="apertoDeMao">
                                    </td>
                                    <td class="subtitulo esquerdaEspaco10">
                                        RELATO DIÁRIO
                                        <br>Gerenciamento do ------------
                                    </td>
                                </tr>
                                <tr>
                                    <td id="infoCabecInicial" class="esquerdaEspaco10">
                                        #-------
                                        <br>08/08/2016
                                        <br>-------
                                    </td>
                                </tr>
                            </tbody></table>
                        </div>


                        <div id="obsCabec">
                            Principais ........ ++++++++ -----------.
                        </div>






        </div>

    </div>


';

body:

$corpo = '

    <div id="corpoRelatCompleto">


        texto totalmente aleatório gerado pelo Lorem Ipsum

    </div>




';

Joining together the HTML:

$pdfCompleto = $css.$inicioCorpo.$firstCabec.$corpo.$fimCorpo;

MPDF:

require_once ('mpdf60/mpdf.php'); 

$mpdf = new mPDF(); 
$mpdf->SetHTMLHeader($header, "E");
$mpdf->SetHTMLFooter($footer,"O");

$mpdf->charset_in='windows-1252'; 

$mpdf->WriteHTML($pdfCompleto);
$mpdf->Output();