1

I 'd like to ask you how to place the footer in the bottom of page (pdf) . i try to create Email template (invoice ) and according the items the number of page can change . My problem is the footer doesn't stay at the bottom of the page .

 <body>
        <div class="bloc-principal">
            <div class="main-header"></div>
            <div class="contenu">
                    <div class="sidebar"></div>
                    <div class="texte"></div>
            </div><!-- contenu -->
        </div><!-- fin bloc-principal -->
                        <div class="main-footer"></div> <!-- Pied de page --
   </body><!-- fin body -->

the problem is on the class main-footer , even if I linked it with CSS code like margin-bottom 0px;

> .bloc-principal{



                        width: 900px;
                        margin: auto;
                        min-width: 50%;
                         background-color:azure;

                   }

footer {

                       font-size: 10px;



                       border: 1px solid blue ;

                       position: absolute;

                       margin-bottom: 0px;
       }

3 Answers 3

3

Hey you can use the following code below, and for different variants of pdf generation refer the following blog post http://sfdevblr.blogspot.in/2014/10/creating-super-awesome-pdfs-with.html

you can use the named page selectors to have the footer only in the last page

        <style>

        @page
        {
            margin-top:70px;
            margin-left:0px;
            margin-right:0px;

            size:portrait;              
            background-color:#EDEDED;


            @top-left
            {
                content : element(top-left-div);

            }
            @top-center
            {
                content : element(top-center-div);
            }
            @top-right
            {

                content : element(top-right-div) ;
            }


            @bottom-left
            {
                content : element(bottom-left-div);
            }

            @bottom-center
            {
                content : element(bottom-center-div);
            }

            @bottom-right
            {
                content : element(bottom-right-div);
            }

        }

        .top-left-div
        {
            position: running(top-left-div);

            background-color:#01a3d6;

            color:white;
            text-align:left;

            border-bottom: 2px solid black;
            padding:17.5px;

        }
         .top-center-div
        {
            position: running(top-center-div);

            background-color:#01a3d6;
            color:white;
            text-align:center;


            border-bottom: 2px solid black;
            padding:25px;

        }
         .top-right-div
        {
            position: running(top-right-div);

            background-color:#01a3d6;
            text-align:right;
            color:white;


            border-bottom: 2px solid black;
            padding:25px;
        }

        .bottom-left-div
        {
            position: running(bottom-left-div);                  

            color:#666666;

            text-align:left;                
            margin:5px;


        }
         .bottom-center-div
        {
            position: running(bottom-center-div);             

            color:#666666;

            text-align:center;
            margin:5px;


        }
         .bottom-right-div
        {
            position: running(bottom-right-div);

            color:#666666;

            text-align:right;
            margin:5px;


        }


        .pagenumber:before 
        {
             content: counter(page);
        }

        .pagecount:before 
        {
            content: counter(pages);
        }


        .content
        {
            margin:10px;


        }
        .pageFont
        {
            font-family: Arial, Helvetica, sans-serif;
        }
        </style>
</head>

<body>
    <!-- HEADER INFO BEGIN-->

        <div class="top-left-div pageFont">

            <!-- THE LOGO -->
            <img src="{!URLFOR($Resource.XXXXXX)}" height="30px"  />

        </div>
         <div class="top-center-div pageFont">
            TOP - CENTER
        </div>
         <div class="top-right-div pageFont">

               <div>
                 TOP - RIGHT  

                 </div>
        </div>
   <!-- HEADER INFO END-->

    <!-- FOOTER INFO BEGIN-->
         <div class="bottom-left-div pageFont">
            BOTTOM - LEFT
        </div>
         <div class="bottom-center-div pageFont">
            BOTTOM - CENTER
        </div>
         <div class="bottom-right-div pageFont">
             <span class="pagenumber"/> 
                       |
             <span class="pagecount"/>
        </div>


   <!-- FOOTER INFO END--> 

   <!-- CONTENT -->
   <div class="content pageFont"> 
      THE CONTENT IN PAGE 1
     </div>  


   <!-- NEW PAGE -->
   <div style="page-break-after:always;"/>

        <div class="content pageFont"> 
           THE CONTENT IN PAGE 2
        </div>  

</body>

0

Please try with below code. May be it can help you.

    <style>

    .footer {position:fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px;}
    .page-number:before {content: counter(page); }
    .page-count:before {content: counter(pages);  }
</style>


<!-- Footer for the report -->
<table class="footer" width="100%" cellspacing="0" cellpadding="0" >
    <tr >
        <td width="33%">
        </td>
        <td/>
        <td width="33%">
        </td>
    </tr>
    <tr>
        <td width="48%">
            <b>Confidential Report</b>
        </td>
        <td width="26%" align="left">
            <p>Page <span class="page-number"/> of <span class="page-count"/></p>
        </td>
        <td width="26%" align="right">
            <apex:image id="theImage" value="{!$Resource.XXXXXX}" width="75" height="20"/>
        </td>
    </tr>
</table>
2
  • thank you for your response I found this code ' @ page { margin : 70pt .5in .5in .5in; @bottom-center { content : "My Footer in center" ; font-size : 10 px; color : #808080; } } ' it places " My footer in center " but the problem is how to link it wih my html tag ' <footer> <p id="piedDepage"> my footer text here </p> </footer> ' Commented Jul 9, 2015 at 5:01
  • I am also not aware of this. had u tried with above piece of code
    – Ankuli
    Commented Jul 9, 2015 at 5:54
0

@Ankuli I test with this code and it works but after , it displays footer for each page not only on the last .

@page {

     @bottom-center {
        content : "My footer here  " ;
        font-size : 10 px;

    }

} the problem is how to find the selector of last page

I test this but doesn't work

@page:last-of-type {@bottom-center {....}}

or @page:last{@bottom-center {....}}

do you have an idea ?

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .