html - Sticking custom footer on each page to bottom while printing

Question

Welcome To Ask or Share your Answers For Others

html - Sticking custom footer on each page to bottom while printing

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Sticking custom footer on each page to bottom while printing

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:40:08+0000

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>

Categories

html - Sticking custom footer on each page to bottom while printing

html - Sticking custom footer on each page to bottom while printing

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags