How can I print an HTML div block once, at the bottom of the page, and have it jump to the next page if it overlaps previous elements?

Question

How do I print a div element so that it is positioned towards the bottom of the page it is on, but is not a footer and is to be printed once only no matter how many pages there are to print (when I set it as a footer it apparently started printing itself on every page)

Also, if there is not enough space on the page to have it printed, it is to jump to the second page.

What it is

I have a div block that is a legend for a table. It describes fields of the table in more detail.

Things I have tried so far

I have tried the fixed footer approach:

@media print {
    #legend {
        position: fixed; 
        bottom: 0;
    }
 }

Somehow it started printing my legend on all pages and not just the first page where I need it. Also when my table is too long, it overlaps the legend. That is not desirable. I am not sure how to proceed.

Answer 1

I seem to be having some success with

@media print :first {
    #legend {
        position: absolute;
        bottom: 0;
    }        
}

and then programmatically breaking up the table in my code, to where i.e. after row 25 I insert a class into the row to force a page break. Or after row 25 stop this table (</table>), restart a new 2nd one (<table>), which will flow onto the next page