仅在页脚部分的最后一页的最底部打印表格页脚
[英]Print table footer at very bottom of last page only at footer section
问题描述
I am trying to make footer stick to the bottom of the very last page only at the footer section of the print preview 
我试图使页脚仅在打印预览的页脚部分停留在最后一页的底部
The page content is dynamic so i dont know which is my last page. 页面内容是动态的，所以我不知道这是我的最后一页。
I have tried the below code and it makes the footer appears at the last page of the preview but not in footer section of the last page.currently the footer section prints at the page 2 which is immediate next to the body section but i want footer section to be printed at page 2 of the footer section 我尝试了下面的代码，它使页脚出现在预览的最后一页，但没有出现在最后一页的页脚部分中。当前页脚部分在第2页上打印，该页紧邻正文部分，但我要页脚页脚部分的第2页上要打印的部分
<html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script> <script language="javascript" type="text/javascript"> function printDiv(divID) { //Get the HTML of div var divElements = document.getElementById(divID).innerHTML; //Get the HTML of whole page var oldPage = document.body.innerHTML; //Reset the page's HTML with div's HTML only document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>"; //Print Page window.print(); //Restore orignal HTML document.body.innerHTML = oldPage; } </script> </head> <body> <button onclick="myFunction()"> Print this page</button> <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" /> > <script> function myFunction() { window.print(); } </script> <div id="printablediv"> <table> <thead> <tr style="height:30px;"> <th> PAGE HEADER</th> </tr> <thead> <tfoot> <tr> <td id="spacer" style="height:200px;"> </td> </tr> </tfoot> <tbody> <tr> <td> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> </td> </tr> </tbody> </table> <div id="footer" style="position:relative; bottom: 0;"> Sample </div> </div> </body> </html>
Please refer to my attached screenshot for reference 请参考我所附的屏幕截图以供参考
1 个解决方案
解决方案1
0 2018-05-13 16:13:20
You can change this code: 您可以更改以下代码：
<div id="footer" style="position:relative; bottom: 0;"> Sample </div>
To this: 对此：
<div id="footer" style="margin-top: 200px"> Sample </div>
You can change the value of margin-top to other value. 您可以将margin-top的值更改为其他值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.