Using CSS or JavaScript to count number of page breaks

Question

I have a very big HTML screen which when you print, prints over 16 pages so in Print Preview you can see page breaks. I am trying to display the page number like this: Page X of Y

So display the page number out of the total number of pages and I am trying to display this in a footer that I created see below

        <!--New Footeer-->
<div id="footer">
                <p>Page X of Y</p>
</div>
<!--End New Footer-->

But is there a way in either CSS or JavaScript which I can use to achieve this? Eg a way to count page breaks?

Answer 1

Try this:

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}

This will print out what you want just with CSS