Posisition Absolute on Mpdf Kartik not working - php

Question

Continue from the question Yii2 mPdf Kartik: Set Height and Width Paper
I have problem width position absolute on page footer.
I have set it up position: absolute; and bottom: 0;
But page footer not in actual position.
The position should be like this:
this is my html code:
<?php
$pages = 1;
$pageof = 1;
$totalPageof = ceil(count($model->details) /10);
$index = 0;
?>
<?php if(count($details) > 0) : ?>
<div class="page-wrapper">
<?php foreach($details as $detail) :
$index += 1;
?>
<?php if($pages == 1) : ?>
<div class="page-layout">
<!-- HEADER -->
<div class="page-header">
<table class="table-header">
<tbody>
<tr>
<td class="font12" width="250"><strong>COMPANY NAME</strong></td>
<td class="font14" width="250"><strong>PROFORMA INVOICE</strong></td>
<td>
<table>
<tr>
<td class="font11" width="80">NO. PO</td>
<td class="font11" width="10">:</td>
<td class="font11"><?=$model->no_po?></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="font11" width="250">
<p>COMPANY ADDRESS</p>
</td>
<td class="font14" width="250"><?=$model->no_rorder?></td>
<td>
<table>
<tr>
<td class="font10" width="80"><?=(!empty($model->tgl_po)) ? date('d-M-Y', strtotime($model->tgl_po)) : NULL ?></td>
<td class="font10"><?=(!empty($model->tgl_tempo)) ? 'DUE DATE '. date(' d-M-Y', strtotime($model->tgl_tempo)) : 'DUE DATE -' ?></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0;">
<table>
<tr>
<td class="font12" colspan="3">COMPANY PHONE</td>
</tr>
<tr>
<td class="font10" width="60">NPWP</td>
<td class="font10" width="10"></td>
<td class="font10"><?=isset($model->distributor) ? $model->distributor->npwp : '-' ?></td>
</tr>
<tr>
<td class="font10" width="60">SALESMAN</td>
<td class="font10" width="10">:</td>
<td class="font11"><?=isset($model->sales) ? (isset($model->sales->code)) ? $model->sales->code.'-'.$model->sales->name : $model->sales->name : '-' ?></td>
</tr>
<tr>
<td class="font10" width="60">NOTICE</td>
<td class="font10" width="10">:</td>
<td class="font10"><?=isset($model->salesType) ? $model->salesType->name : '-' ?></td>
</tr>
</table>
</td>
<td colspan="2">
<table>
<tbody>
<tr>
<td rowspan="2" class="font12 grid-1">Kepada YTH</td>
<td class="grid-2">
<p class="font12"><?=isset($model->outlet) ? $model->outlet_code.' - '.$model->outlet->name : '-' ?></p>
<p class="font12"><?=isset($model->outlet) ? $model->outlet->address : '-' ?></p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="font10 text-left" style="padding-left:180px;" colspan="2">
<span>
Phone <?=isset($model->outlet) ? $model->outlet->phone_1 : '-' ?>
</span>
</td>
</tr>
<tr>
<td class="font10" width="200"><?=isset($model->outlet) ? $model->outlet->npwp : '-'?></td>
<td class="font10"><?='Page '. $pageof++ .' Of '. $totalPageof ?></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /HEADER -->
<?php endif; ?>
<!-- /endif pages header -->
<!-- CONTENT -->
<?php if($pages == 1) : ?>
<div class="page-content">
<table class="table-content">
<thead>
<tr>
<th>KODE#</th>
<th>PRODUK</th>
<th colspan="5">QUANTITY</th>
<th>PRICE</th>
<th>DISC</th>
<th>SUB TOTAL</th>
</tr>
</thead>
<tbody>
<?php endif; ?>
<!-- /endif pages content -->
<tr>
<td class="text-right"><?=(isset($detail['typeproduct'])) ? '*'. $detail['product_code'] : $detail['product_code']?></td>
<td><?=$detail['product_name']?></td>
<td><?=($detail['comp_1'] && $detail['zqty_1'] != 0) ? number_format($detail['zqty_1']).'.'.$detail['comp_1'] : ''?></td>
<td><?=($detail['comp_2'] && $detail['zqty_2'] != 0) ? number_format($detail['zqty_2']).'.'.$detail['comp_2'] : ''?></td>
<td><?=($detail['comp_3'] && $detail['zqty_3'] != 0) ? number_format($detail['zqty_3']).'.'.$detail['comp_3'] : ''?></td>
<td><?=($detail['comp_4'] && $detail['zqty_4'] != 0) ? number_format($detail['zqty_4']).'.'.$detail['comp_4'] : ''?></td>
<td><?=($detail['comp_5'] && $detail['zqty_5'] != 0) ? number_format($detail['zqty_5']).'.'.$detail['comp_5'] : ''?></td>
<td class="text-right"><?=(!is_null($detail['zsprice_1'])) ? number_format($detail['zsprice_1'], 0, ',', '.') : ''?></td>
<td class="text-right"></td>
<td class="text-right"><?=(!is_null($detail['zjum_j'])) ? number_format($detail['zjum_j'], 0, ',', '.') : ''?></td>
</tr>
<!-- COUNTER ITEM -->
<?php if($pages == 10 || $index == count($details)) : ?>
</tbody>
</table>
</div>
<!-- /CONTENT -->
<!-- FOOTER -->
<?php if($totalPageof == ($pageof-1)) : ?>
<div class="page-footer">
<table class="table-footer">
<tbody>
<tr>
<td class="grid-1">
<p class="font9"><?=(!empty($model->keterangan)) ? '<i>##</i>'. $model->keterangan : NULL ?></p>
</td>
<td class="grid-2 text-right" width="200">
<p class="font12"><strong><?=(!$model->post) ? '' : '### PENCETAKAN ULANG ##' ?></strong></p>
<table>
<tbody>
<tr>
<td class="font9" width="60">Cetakan ke</td>
<td class="font9">:</td>
<td class="font9 text-right"><?= (!empty($model->post)) ? $model->print : 0 ?></td>
<td></td>
<td class="font9" width="60">Sub Total</td>
<td class="font9">:</td>
<td class="font9 text-right"><?=number_format($realJumlah['total_j'], 0, ',', '.')?></td>
</tr>
<tr>
<td class="font9" width="60">Total Pcode</td>
<td class="font9">:</td>
<td class="font9 text-right"><?= count($details) ?></td>
<td></td>
<td class="font9" width="60">Disc Inv</td>
<td class="font9">:</td>
<td class="font9 text-right"><?=number_format($realJumlah['disc_percent'], 0, ',', '.')?></td>
</tr>
<tr>
<td class="font9" width="60">Point</td>
<td class="font9">:</td>
<td class="font9 text-right"><?=number_format($realJumlah['disc_point'], 0, ',', '.')?></td>
<td></td>
<td class="font9" width="60">DPP</td>
<td class="font9">:</td>
<td class="font9 text-right"><?=number_format($realJumlah['dpp'], 0, ',', '.')?></td>
</tr>
<tr>
<td colspan="4"></td>
<td class="font9" width="60">PPN</td>
<td class="font9">:</td>
<td class="font9 text-right"><?=number_format($realJumlah['ppn'], 0, ',', '.')?></td>
</tr>
<tr>
<td colspan="4"></td>
<td class="font10" width="60"><strong>TOTAL</strong></td>
<td class="font10">:</td>
<td class="font10 text-right"><strong><?=number_format($realJumlah['inv'], 0, ',', '.')?></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="grid-1"></td>
<td class="grid-2 font10 money text-justify"><?=$realJumlah['terbilang']?></td>
</tr>
<tr>
<td class="grid-1">
<p class="font10">Admin SPV Gudang Pengirim Outlet</p>
<p class="font10">Produck yang sudah diterima harap diperiksa kembali</p>
<p class="color-white">----------------------------------------------------</p>
<p>----------------------------------------------------</p>
</td>
<td class="grid-2" style="padding-left: 80px;">
<table>
<tbody>
<tr>
<td class="font9">User</td>
<td class="font9">:</td>
<td class="font9"><?=Yii::$app->user->identity->profile->user->username?></td>
</tr>
<tr>
<td class="font9">Printed</td>
<td class="font9">:</td>
<td class="font9"><?= date('H:i:s', time()) ?></td>
</tr>
<tr>
<td class="font9">on</td>
<td class="font9">:</td>
<td class="font9"><?=date('d/m/Y')?></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<?php endif; ?>
<!-- /FOOTER -->
<?php endif; ?>
<!-- /COUNTER ITEM -->
</div>
<?php
$pages++;
if($pages > 10)
$pages = 1;
endforeach;
?>
<!-- /endforeach -->
</div>
<?php endif; ?>
<!-- /endif count -->
And this my css code:
/** page layout */
.page-wrapper {
height: 13.6cm;
width: 21.2cm;
}
.page-layout {
height: 13.6cm;
width: 21.2cm;
}
.page-footer {
bottom: 0;
position: absolute;
}
/** end page layout */
/** table style */
.table-header {
width: 100%;
}
.table-header tbody tr td {
padding-bottom: 0;
padding-top: 0;
vertical-align: text-bottom;
}
.table-header tbody tr td p {
margin: 0;
}
.table-header tbody tr td table {
width: 100%;
}
.table-header tbody tr td table tbody tr td.grid-1 {
width: 20%;
}
.table-header tbody tr td table tbody tr td.grid-2 {
width: 80%;
}
.table-content {
font-family: 'Couriere';
width: 100%;
}
.table-content thead tr th {
border-bottom: 1px dashed #000;
font-size: 12px;
font-weight: 300;
text-align: center;
}
.table-content tbody tr td {
font-size: 12px;
padding-bottom: 0;
padding-top: 0;
}
.table-footer {
width: 100%;
}
.table-footer tbody tr td {
padding-bottom: 0;
padding-top: 0;
position: relative;
}
.table-footer tbody tr td p {
margin: 0;
}
.table-footer tbody tr td.grid-1 {
vertical-align: text-bottom;
width: 70%;
}
.table-footer tbody tr td.grid-2 {
width: 30%;
}
.table-footer tbody tr td.money {
padding-left: 40px;
}
.table-footer tbody tr td table {
width: 100%;
}
/** end table style */
/** custom child */
.font9 {
font-size: 9px;
}
.font10 {
font-size: 10px;
}
.font11 {
font-size: 11px;
}
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.color-white {
color: #fff;
}
/** end custom child */
May be someone has experienced it, hopefully it can be helped.