I have a div with a class footer-spec

How do I use prince to move that div to the bottom of the PAGE in regards to the pdf that is generated.

I have tried:

-prince-float: page;
-prince-clear: end;

Chrome does not seem to register those attributes.

Also tried:

flow: static(flow-prince-footer)

Not really sure what to do!

Please help!

You could try -prince-float: page end;

Thanks for reply - for some reason when I add that it just doesn't get registered:

element.style {
-prince-float: page end;
}

The prince-float gets crossed out. I attached a screenshot of what I mean. Is there something I need to add to my style sheet for that to work?

1. Screen Shot 2021-09-10 at 7.37.46 AM.png‎ 9.0 kB

The "prince-float" property only works in Prince, not Firefox or Chrome.

Thanks so I have a div with a class "footer-note-section"

In the prince-page.css I am adding a property:

.footer-note-section {
-prince-float: page-end;
}

I get a linter error: "Also define the standard property 'float' for compatibility"

But when I then run the app and export the pdf of the page using that div - It doesn't go to the bottom of the page. Is there anything else I can do?

The value of the property should be "page end" (two keywords) not "page-end".

Sorry, that should be "page bottom"! Like this:

<style>
.footer-note-section {
    -prince-float: page bottom
}
</style>
<div class="footer-note-section">
This will be at the bottom of the page.
</div>

Thanks!

I have a html string to take a pdf with running footers and running header. Now I need to add an additional footer text in between the page area and bottom (Footer). I have applied the div with the class of “fn” and added the style like below code.

.fn {
    -prince-float: page bottom;
}

My div is like this

<div class="fn" style="width:100%;height:0px; border-bottom:solid 8px #663300; margin-bottom:10px;">
                    <table><br>
                    <tr>
                        <td style="font-size:8pt;">
                             I need this div in all the pages 
                        </td>
                    </tr> </table>
</div>

It’s working fine in the first page of the pdf. But I need to add the same div in all our pdf pages without adding an extra div for each page.
Is there any property to add the footnote in all the pages with a common div.
I need the footer in all the pages like the image below that I attached here.

1. Footnote view.png‎ 51.2 kB ‎
   Footnote view

Edited 1 Sep 2022 by jamsheer

You can use running elements for this. Here's a guide:

https://css4.pub/2022/running-headers/#running-elements

There can only be one running element per margin box, but it can have sub-elements. In the example pointed to above, the <math> element is such sub-element.