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

Question

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

Pra*_*eep 5 html javascript css google-chrome print-preview

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

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

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

Run Code Online (Sandbox Code Playgroud)

请参考我所附的截图以供参考

Answer 1

小智 0

您可以更改此代码：

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

Run Code Online (Sandbox Code Playgroud)

对此：

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

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	7 年，3 月前
查看次数：	3271 次
最近记录：	7 年，3 月前