Print Page Avoid Fixed Bottom Footer to Overlap Table Rows and Move Excess Rows to Next Page Instead

I have table which is overlapping my positioned fixed bottom 0 footer when printing. How to fix it so that the rows being overlapped by the footer will move to next page? I have tried different approach suggested by other members of this group but nothing works for me maybe because of the complication of my template which consists of tables and divs. My goal is to break the table row of the right side table containing the grades and remain the footer fixed at the bottom in every page to print. I hope someone willing to help me with this.

CSS Styles

    <style>
* {
  box-sizing: border-box;
}
.page {
  size:  legal portrait;
}
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; 
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.columns {
  float: left;
  width: 100%;
  padding: 10px;
  height: 20px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: transparent;
   color: black;
   text-align: left;
}
@media print
{
  .main_table table { page-break-after:auto }
  .main_table tr    { page-break-inside:auto; page-break-after:auto }
  .main_table td    { page-break-inside:auto; page-break-after:auto }
  .main_table thead { display:table-header-group }
  .main_table tfoot { display:table-footer-group }
}
</style>

HTML BODY

    <body style="font-family: 'Arial';">
    <center><img src="{{@Auth::user()->uarea->area_report_header_path}}" alt="ifsu-logo-header" style=" width: 650px; height: 120px;"><p style="font-family: Arial; font-size:20px;"></p><br><h3>OFFICIAL TRANSCRIPT OF RECORDS</h3>
    </center>
    <table style="margin-top: 50px; margin-bottom: 20px; margin-left: 10px;">
      <tbody>
        <!-- Content Here -->
      </tbody>
    </table>
    <div class="row" style="margin-left: 0px;;">
    <div class="col-md-9" style="border-right:1px solid gray; height: auto;">
      <table style="margin-top: 5px; margin-bottom: 10px; border-bottom: 1px solid gray;">
          <thead>
            <tr>
            <th style="width:155px;">SUBJECT CODE</th>
            <th style="width:525px;">DESCRIPTIVE TITLE</th>
            <th style="width:65px;">GRADE</th>
            <th style="width:70px;">CG</th>
            <th style="width:50px;">UNITS</th>
            </tr>
          </thead>
      </table>
      @foreach(@$student_grades->groupBy('period_id') as $value)
        <table style="margin-top: 5px;" class="main_table">
            <tbody>
              <!-- THIS IS THE RIGHT TABLE THAT SHOULD BREAK -->
            </tbody>
        </table>
      @endforeach
    </div>
    <div class="col-md-3">
      <table style="margin-top: 5px; margin-bottom: 10px; width: 99%;">
         <!-- THIS IS THE LEFT SIDE TABLES -->
      </table>
    </div>
  </div>
<div class="footer" style="margin-left: 10px; border-top: 1px solid gray;">
  <!-- THIS IS THE FOOTER -->
</div>
</body>

IMAGE