tengkie Posted February 9, 2010 Share Posted February 9, 2010 I'm being able to print a HTML page to either PDF or MS Word. For the page footer, i'm using a CSS that set the page footer at the bottom of the page. It only works for 1 page only. If i'm printing more than 1 pages, the footer will overlapped with data from first page. How do i managed to set the page footer only printed at the bottom of the last page? Here is my code: <style type="text/css"> .footer { position: absolute; bottom: 0px; left: 0px; width: 100%; } </style> <div class="body"> some page content..... ........... .......... ......... some page content.... </div> <div class="footer"> some footer notes...... </div> with those codes, the page footer will only shown at the first page and it will overlapped with body content. Any idea how to make my footer only printed at the bottom of the last pages (if my document contains more than one pages)? Thanks for your kind help. Quote Link to comment Share on other sites More sharing options...
RussellReal Posted February 9, 2010 Share Posted February 9, 2010 .footer { position: fixed; bottom: 0; height: 20px; /* set height of the footer */ } body { padding-bottom: 20px; /* set this to the height of the footer */ } Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 10, 2010 Author Share Posted February 10, 2010 .footer { position: fixed; bottom: 0; height: 20px; /* set height of the footer */ } body { padding-bottom: 20px; /* set this to the height of the footer */ } Did that already before, but still facing same problem. the footer stuck at page one instead of at bottom of last pages that I printed or converted to PDF. Anyway, thanks for helping. Quote Link to comment Share on other sites More sharing options...
redarrow Posted February 10, 2010 Share Posted February 10, 2010 your have to create the page on it own, then include the page to every page that needs the footer..... index.php include header.php include body.php include footer.php get the drift? Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 10, 2010 Author Share Posted February 10, 2010 your have to create the page on it own, then include the page to every page that needs the footer..... index.php include header.php include body.php include footer.php get the drift? that's not what I meant. here is my situation: I have a dynamic page generated thru PHP + MySQL. When I print this page, sometimes it needs only a single A4 paper size and sometimes it needs 2,3 or more papers. The problem is, I made a page footer that stick to the bottom of the page using CSS. It works fine when I only print 1 page, the footer stick to the bottom of the page (that I printed). But, when my page contains more than 1 page, the footer will be printed on every single page and overlapped with the text on that page. What I want is the footer only printed on the bottom of the last page that I print. Any solution? Hint? Hack? Anyway, thanks for helping. Quote Link to comment Share on other sites More sharing options...
RussellReal Posted February 10, 2010 Share Posted February 10, 2010 try containing the content in a div.. and making the div overflow: scroll.. and the body overflow: hidden; so that the scroll pane only shows up to the right of the div containing the content. Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 10, 2010 Author Share Posted February 10, 2010 try containing the content in a div.. and making the div overflow: scroll.. and the body overflow: hidden; so that the scroll pane only shows up to the right of the div containing the content. I don't get it... Could you describe it with codes? Coz i have no idea about your explanation. Thx for helping. Quote Link to comment Share on other sites More sharing options...
RussellReal Posted February 10, 2010 Share Posted February 10, 2010 <body style="margin-bottom: 20px; overflow: hidden;"> <div style="position: fixed; bottom: 0;">Footer Text</div> <div style="overflow: scroll; width: 100%; height: 100%; display: block;"> content content content </div> </body> Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 10, 2010 Author Share Posted February 10, 2010 <body style="margin-bottom: 20px; overflow: hidden;"> <div style="position: fixed; bottom: 0;">Footer Text</div> <div style="overflow: scroll; width: 100%; height: 100%; display: block;"> content content content </div> </body> I tried your method and duplicate body content into a very long contents. When I print it as PDF files, i only get a single PDF page. It supposed to be about 3 or 4 pages. The others are missing. Anyway, thanks again for helping me. Quote Link to comment Share on other sites More sharing options...
RussellReal Posted February 11, 2010 Share Posted February 11, 2010 last resort.. iframe.. set up an iframe 100% tall 100% wide.. then put the footer on the bottom of the page.. and the iframe will scroll correctly Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 11, 2010 Author Share Posted February 11, 2010 last resort.. iframe.. set up an iframe 100% tall 100% wide.. then put the footer on the bottom of the page.. and the iframe will scroll correctly Actually, all your suggestion works fine when I open the page in browser (as HTML). But, the real problem begins when I save it as PDF or print it to printer. The footer will overlapped with the last row on the first page (in case it needs more than one page to be printed). Quote Link to comment Share on other sites More sharing options...
RussellReal Posted February 11, 2010 Share Posted February 11, 2010 maybe pdfs don't support positioning from css.. put it in a table.. Quote Link to comment Share on other sites More sharing options...
tengkie Posted February 11, 2010 Author Share Posted February 11, 2010 maybe pdfs don't support positioning from css.. put it in a table.. yeah, it think printed media does not support any absolute or fixed position from CSS. I'll try using table... Thanks for your kind help. Quote Link to comment Share on other sites More sharing options...
jaydev Posted July 22 Share Posted July 22 On 2/11/2010 at 8:20 AM, tengkie said: yeah, it think printed media does not support any absolute or fixed position from CSS. I'll try using table... Thanks for your kind help. hello @tengkie, did you get any solution for this? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.