Weasy Print unable to make the footer to the bottom of the page

Question

I have jinja template which I can modify to add tables I have been trying to align the footer to bottom of the A4 page but with less data to fill the page the footer is just hanging at the bottom of the content not the poge

I tried adding this in the style sheet but still the footer is just staying at the bottom of the content

        @page {
            margin: 0;
            size: A4;
            @bottom-center{
                content: element(footer);
            }
        }

Answer 1

In order to position the footer to the bottom of the page you can style your body like this:

body {
    display: flex; 
    flex-direction: column;
    min-height: 100vh;
}

And then you should style your footer like this:

footer {
    margin-top: auto;
}