Jump to content

Need help with HTML to PDF with footer


tengkie

Recommended Posts

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.

Link to comment
Share on other sites

.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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

  • 14 years later...
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?

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.