5

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

<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 referenceenter image description here

Pradeep
  • 189
  • 1
  • 5
  • 16
  • Changing `position: relative;` of your `footer` to `position: absolute;`, should work. – CodeF0x May 13 '18 at 14:48
  • 1
    @CodeF0x Thx for your instant reply.we tired as per your suggestion by changing position to absolute but the footer section was not shown in page 2 but it was showing in page 1 – Pradeep May 13 '18 at 14:56
  • @Pradeep did you solve this issue? if you have a solution to this issue please share, thanks – imsome1 Dec 30 '19 at 13:21
  • 1
    Did you find any solution to this ? – Emanuel Nov 02 '21 at 15:10

1 Answers1

0

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.

  • 2
    No i cant set margin-top for this footer because the body content is dynamic so i dont know which is my last page.If the body content is less with only two lines then also the footer should remains at same position – Pradeep May 13 '18 at 16:54