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>
