每页固定页脚，页脚不重叠

Question

我想为我的打印页面添加一个页脚，它看起来像这样，问题是当我尝试添加位置时：修复它上面的数据仍然与页脚重叠，并继续到第二页。

我想知道的是这些数据是如何与页脚重叠的，当它到达“注意：”div btw im使用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>

小提琴：

https://jsfiddle.net/h6y4srez/

Answer 1

为了根据需要为打印页面添加页脚，我将代码保存在代码笔上，这可以帮助您记下我在不使用Bootstrap的情况下执行此操作。

作为一个建议，最好使用class而不是In-line style。

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

Click to view CodePen

Answer 2

我不知道这是否是你需要的。

＆＃13;

＆＃13;

.panel-body{
  position:relative;
}
#footer{
  height:200px;
  width:100%;
  border-right:1px solid #E8E8E8;
  float:left;
  position:absolute;
  top:100%;
  left:0;
  background-color:white;
}
#recieved_by{
  float:left;
  width:50%;
}
#recieved_from{
  float:left;
  width:50%;
}

＆＃13;

<div id="page-wrapper">

<div class="row">
            <div class="col-md-12">
             
                            <div class="panel-body">
                                      

                                        <div>
                                             <img src="" style="float:left;margin-right:-60px;margin-top:-10px;"><p style="text-align:center;"><b>Republic of </b><br>
                                       
                                                <button id="ttt" class="btn btn-primary btn-sm hidden-print" style="float:right;margin-top:-90px;" onclick="window.print();" >
                                <i class="fa fa-print fa-fw"></i>Print
                            </button>
                                        </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="panel panel-default">
                                                            <div class="panel-body">
                                                                <p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
                                                                
                                                                <p style="float:right;margin-bottom:0px;">Control No.&nbsp&nbsp
                                                              
                                                                </p>
                                                                <div class="row">
                                                                <div class="col-md-12" >
                                                                    <table class="table table-hover table-striped table-bordered table-condensed" style="font-size:12px;">
                                                                        <thead>
                                                                            <tr>
                                                                                <th style="text-align:center;font-size:12px;">Quantity</th>
                                                                                <th style="text-align:center;font-size:12px;">Unit</th>
                                                                                <th style="text-align:center;font-size:12px;">Description</th>
                                                                                <th style="text-align:center;font-size:12px;">Unit Value</th>
                                                                                <th style="text-align:center;font-size:12px;">Property No.</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                
                                                                            <tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>

                                                                            </tr>
                                                                            <tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr>
                                                                            <tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr><tr>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsada</td>
                                                                            <td style="font-size:12px;text-align:center;width:60px;">dsadsa</td>
                                                                            <td style="font-size:12px;width:400px;text-align:center;">das</td>
                                                                            <td style="font-size:12px;text-align:center;width:80px;">da</td>
                                                                            <td style="font-size:12px;text-align:center;width:120px;">dsa</td>
                                                                            
                                                                            </tr>
                                                                        </tbody>
                                                                      
                                                                    </table>

                                                       

                                                            </div>
                                                        </div>

<div  id="footer" 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 id="recieved_by" >
                                                                                                                    <p >Recieved by:</p>
                                                                                                        
                                                                                                                     <p style="text-align:center;margin-bottom:0px;margin-top:20px;font-weight:bold;"></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;"></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;"></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;"></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 id="recieved_from" ><p style="margin-left:10px;">Recieved from:</p>
                                                                                                                     <p style="text-align:center;margin-bottom:0px;margin-top:20px;font-weight:bold;"></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;"></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;"></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;"></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>
                                                                                                    </div>
                                                                                   </div>
                                                </div>
                                        </div>                      

＆＃13;

＆＃13;

＆＃13;

Fiddle