2

I have a table with variable number of rows. I want to print that table via browsers. Below it, there's a div that should remain at the bottom of the page. If the table is contained in the first page, the div will be at bottom of the first page. If the table overflow to the second page, the div will be a the bottom of the second page and so on,... My first approach was to handle it like I used to do in HTML

.footer{
   width: 100%;
      position: absolute;
      bottom: 0;
      font-size: 10pt;
 }

This is not working. the footer remain on the first page. Need your help, please!

EDIT

I made the table and the footer in a parent div so that they can loop. A footer will always be on the same page as the end of a table. Sorry, for my inaccuracy!

SOLVED [EDITED]

I finally made it by surrounding the footer by another div and doing some CSS as follow:

.table{
        min-height: 20cm !important;/* Define height for the table in cm or mm (I encountered a problem with px and %) */
        display: block;
        position: relative;
        width: 100% !important;
    }
    .footer{
        width: 100%;
        position: relative;
        margin-bottom: 0 !important;
        font-size: 10pt;
        page-break-inside: avoid !important;
        page-break-before: auto !important; /* this pushes the footer to the bottom of next page if table overflows to another page */
    }

The only remaining problem is when the table matches exactly the first page: the footer is pushed to the next page but is displayed on the top :( Thank you for all of your answers guys! :)

Knighto05
  • 51
  • 1
  • 9

2 Answers2

0

Try to use position: fixed; to this div.

It should be placed at the bottom of printed page, if you set bottom: 0;

Laurent Meyer
  • 2,766
  • 3
  • 33
  • 57
dolu92
  • 17
  • 2
  • you're right but I forgot to mention that the table and the div are looping! if I make the div to fixed, it 'll go at the end of the document not at the same page with the end of the table. – Knighto05 Jun 09 '16 at 12:14
  • 1
    No, if you will set the div to fixed, it will be repeated on the bottom of all pages. But, as far as I know you want to clear the rest of the page, on which the table is ended, and then, at the bottom of this page you want to put the footer? After that, next page is started with new table, that spans over 3 pages, so 3 pages further you have next footer div? Correct me, if I'm wrong. – dolu92 Jun 09 '16 at 13:09
  • 2
    Yeah, you got it! I tried `position:fixed;` and it worked like a charm for the first iteration, but then the footer appeared in every single page even till the end. I don't know why! – Knighto05 Jun 09 '16 at 13:21
  • 2
    footer appearing on every single page is the default behavior. (I am currently looking into how to stop that) – Dennis Apr 04 '19 at 19:14
  • 2
    didn't OP write specific page? your answer is not correct therefore. I downvoted it. – Justin Farrugia Oct 22 '20 at 06:44
0

I made my footer stick to the bottom of the div and to follow it.

If I understand correctly, you want the footer to be at the end of the table, here's how I did it:

#footer {

    background-color: #333;
    clear:both;
    bottom: 0;
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    border-radius:0px 0px 10px 10px;
}

and the paragraf inside the footer:

#paragraf_1 {
        display:block;
    color:white;
    text-align:bottom-left;
    padding:14px 16px;
    text-decoration:none;
}
David Landup
  • 169
  • 1
  • 16