Assign Header And Footer using Visualforce Page with CSS

July 27, 2017
Merfantz Editor
Salesforce Developments Tutorial
3

Sometimes we are getting a lot of confused in visualforce page header and footer assignment (when Change to PDF Format). Don’t Worry about it hereafter, You can avoid this kind of issues by using following CSS Code.

======================================================================

       @page    
                {
size:A4 portrait;
    margin-left: 1cm;
    margin-right: 1cm;
    margin-top: 1cm;
    margin-bottom: 3.54cm;
                   @bottom-left
                   {
                        content: element(footer);
                   }
                }
         div.footer 
                {
                    position: running(footer);
                }

==========================================================================

Save this CSS file into a static resource.
And call from the visualforce page.
Eg..

<apex:stylesheet value="{!URLFOR($Resource.MerfantzStyles, 'merfantzCss.css')}"/>