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;
       }
2

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>

|improve this answer|||||
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>
|improve this answer|||||
  • 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> ' – Julio Ludovic Ramihone Jul 9 '15 at 5:01
  • I am also not aware of this. had u tried with above piece of code – Ankuli Jul 9 '15 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 ?

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.