仅在页脚部分在最后一页的最底部打印表格页脚答案

【问题标题】：Print table footer at very bottom of last page only at footer section仅在页脚部分在最后一页的最底部打印表格页脚
【发布时间】：2018-10-23 08:08:58
【问题描述】：

我试图让页脚仅在打印预览的页脚部分粘在最后一页的底部

页面内容是动态的，所以我不知道哪个是我的最后一页。

我已经尝试了下面的代码，它使页脚出现在预览的最后一页，但不在最后一页的页脚部分。目前页脚部分打印在第 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>

请参考我附上的截图

【问题讨论】：

将position: relative; 的footer 更改为position: absolute;，应该可以。
@CodeF0x 感谢您的即时回复。根据您的建议，我们厌倦了将位置更改为绝对位置，但页脚部分未显示在第 2 页中，但显示在第 1 页中
@Pradeep 你解决了这个问题吗？如果您有解决此问题的方法，请分享，谢谢
你找到解决办法了吗？

标签： javascript html css google-chrome print-preview

【解决方案1】：

您可以更改此代码：

<div id="footer" style="position:relative; bottom: 0;"> Sample </div>

到这里：

<div id="footer" style="margin-top: 200px"> Sample </div>

您可以将margin-top的值更改为其他值。

【讨论】：

不，我不能为此页脚设置 margin-top，因为正文内容是动态的，所以我不知道哪一页是我的最后一页。如果正文内容较少，只有两行，那么页脚也应该保留在同一位置