Sticking custom footer on each page to bottom while printing

css, html

Solution

Finally found an answer:

- html,body MUST HAVE height: 100%;

- There should be two types of div: outside (size of page), footer

- For both set display: block;

- For the outside set height: 100%; position: relative;

- For the inside set position: absolute; bottom: 0px;

Voila!

Here is my complete code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <style>
        html,body
        {
            height: 100%;
            margin: 0px;
        }
        body > div
        {
            height: 100%;
            display: block;
            position: relative;
        }
        body > div > div
        {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div>
        Page1
        <div>Page1Footer</div>
    </div>
    <div>
        Page2
        <div>Page2Footer</div>
    </div>
    <div>
        Page3
        <div>Page3Footer</div>
    </div>
</body>
</html>

Problem

I want to print 30 pages with some data on top and some data on bottom. My code looks like: ``` <...> <div style="page-break-after: always"> <div>This should be on top1</div> <div>This should be on bottom1</div> </div> <div style="page-break-after: always"> <div>This should be on top2</div> <div>This should be on bottom2</div> </div> <etc> ``` I tried everything: - Positions: relative (no change), absolute (footer on first page only), fixed (on last page only) - Setting html, body, each div height to 100%. No idead why should I do this. Did not change anything Maybe there is a way to force my browser (FF) to stick div to bottom of page?

Original source

Related problems