hi everybody, I searched this for a while but with reitking's post I got the biggest part of the solution. Thanks to you reitking !
Here is my solution. I add a main table with thead and tfoot section to my html code. The tfoot section of the table is only used as a "spacer". Because the real footer is fixed it may overwrites other contents. the tfoot then leaves a blank section at the bottom of every pages.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Service request</title>
<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
html, body{height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}
#footer {display: none;}
</style>
<style type="text/css" media="print">
#footer {display: block; position: fixed; bottom: 0;
}
#mainDiv{
margin-left:15px;
}
</style>
</head>
<body>
<form id="form1" >
<div id="mainDiv">
<table border="0" width="100%">
<!--define a table header so the header will be repeated on every pages-->
<thead>
<tr>
<th style="width:100%">
page header content
</th>
</tr>
<tr>
<th><hr style="color:#000080"/></th>
</tr>
</thead>
<!--Define a tfoot just as a bottom page padding. leave it blank so the main page content will not writes over the page footer (define at the bottom of the page)-->
<tfoot>
<tr>
<td width="100%">
<table width="100%" border="0">
<tr>
<td colspan="4"><br /> </td>
</tr>
</table>
</tfoot>
<tbody>
<tr>
<td width="100%">
put your large html code here to generate a multipage printout
</td>
</tr>
</tbody>
</table>
<!--define a fixed table which contains the real footer. Only displayed on print media...see style section-->
<table id="footer" width="100%">
<tr>
<td width="100%">
put footer text here
</table>
</div>
</form>
</body>
</html>
