[SalesForce] renderAs pdf is not working with the footer at the bottom

I'm new in Salesforce but I have a quote that I need to show as a PDF with a header and a footer but just in the last page. Actually is working with renderAs="pdf" But is not showing the footer at the bottom of the page, it show it where it end (it could be at the beggining, middle or end). However if I don't write renderAs="pdf", it works fine but just as HTML page.

I made a simple dummy that you can edit writting and deleting the renderAs="pdf" to see the issue.

Any help would be really apprecciate it.

This is the dummy:

CSS:

<style> 
    html,body {margin:0;padding:0;height:100%;}
#wrapper {min-height:100%;position:relative;}
#header {padding:10px;background:#5ee;}
#content {padding:10px;padding-bottom:80px;   /* Height of the footer element */}
#footer {width:100%;height:80px;position:absolute;content : "My Footer on right Side";bottom:0;left:0;background:#ee5;}
    </style>

PAGE:

All the HTML code inside apex code: 

<apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false" sidebar="false" readOnly="true">

    <body>
        <div id="wrapper">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"> content : "My Footer on right Side";</div>
        </div>
    </body>
</apex:page>

Best Answer

I strongly suspect the problem is with your CSS. When you renderAs as PDF, you're essentially "printing" the HTML page just like you would on a printer. SF's PDF engine only supports CSS 2.1, not CSS 3.

Your current CSS for the footer looks like the following:

#footer {width:100%;height:80px;position:absolute;content : "My Footer on right Side";bottom:0;left:0;background:#ee5;}

I think you need to define your header and footer layout for the page in an @page using something like the following:

@page {
    margin : 10pt .5in .5in .5in; // use whatever values are appropriate
    @top-center {
        content : "My Header";
     }
    @bottom-right {
        content : "My Footer on Right Side";
        color : #808080; // optional as this can be in your def for content
    }
}

Once you have the above, you can define the header and footer using CSS 2.1 compatible properties.

For more on this, see CSS 2.1 Paged Media and for more information on the PDF rendering engine Salesforce is using see: Flying Saucer.

Related Topic