html - 每页固定页脚，数据不与页脚重叠

Question

我想为我的打印页面添加页脚，它看起来像这样，问题是当我尝试添加 position:fix 时，上面的数据仍然与页脚重叠，并继续到第 2 页。

我想知道的是这些数据如何不与页脚重叠，并且在到达“注意:”div 时直接转到下一页，顺便说一句，我正在使用 bootstrap

页脚:

 <div class="row" style="font-size:12px;">
    <div class="col-md-12">
      <div style="width:100%;height:20px;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;"><p style="margin-left:10px;">NOTE:</p> </div> 
       <div style="height:100%;width:50%;border-right:1px solid #E8E8E8;float:left;">
         <p style="margin-left:10px;">Recieved by:</p>
         <p style="text-align:center;margin-bottom:0px;margin-top:20px;font-weight:bold;"><?php echo $receiver_name; ?></p>
     <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
         <p style="text-align:center">Signature over printed name</p>
         <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $receiver_designation; ?></p>
     <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
         <p style="text-align:center">Designation</p>
         <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $receiver_office; ?></p>
    <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Office</p>
       <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $row->date_acquired; ?></p>
       <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Date</p>                                                                                                              </div>
    <div style="float:left;width:50%;" ><p style="margin-left:10px;">Recieved from:</p>
       <p style="text-align:center;margin-bottom:0px;margin-top:20px;font-weight:bold;"><?php echo $a_name ?></p>
    <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Signature over printed name</p>
       <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $a_designation ?></p>
   <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Designation</p>
       <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $a_office ?></p>
      <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Office</p>
       <p style="text-align:center;margin-bottom:0px;margin-top:20px;"><?php echo $row->date_acquired; ?></p>
    <div style="height:1px;width:80%;border-top:1px solid black;margin:0px auto;"></div>
       <p style="text-align:center">Date</p>
   </div>
</div>

fiddle :

https://jsfiddle.net/h6y4srez/

Answer 1

为了根据要求为打印页面添加页脚，我将代码保存在代码笔上，这应该有助于您注意我是在没有使用 Bootstrap 的情况下完成的。

作为一个建议，最好使用类而不是内联样式。

<td style="font-size:12px;text-align:center;width:60px;">dsada</td>

Click to view CodePen