CODEWITHSUNDEEP
htmlcssfooter
dlp
dlp

Reputation: 420

Need CSS for printed footers on all pages but last, different footer on last

What I need to accomplish

I have a web page that is printed out on paper. When viewed on screen, I don't want any footers. When printed out on paper, I'd like the same footer to appear on everyone but the last page, and the last page to have a different footer. Ideally, this will support the modern browsers but also work with IE 7/8 as well.

What I have so far

<!DOCTYPE html>
<html>
<head>
    <title>Test of paging</title>
    <style type="text/css"> 
        .page_footer {
            display: none;
            page-break-after: always;
        }

        .last_page_footer {
            display: none;
        }

        @media print {
            .page_footer {
                display: block;
                position: absolute;
                bottom: 0;
                page-break-after: always;
            }

            .last_page_footer {
                display: block;
                position: absolute;
                bottom: 0;
            }
        }
    </style>
</head>
<body>
<div>One</div>
<div class="page_footer">Not last footer</div>
<div>Two</div>
<div class="page_footer">Not last footer</div>
<div>Three</div>
<div class="page_footer">Not last footer</div>
<div>Four</div>
<div class="last_page_footer">Last footer</div>
</body>
</html>

Currently, it shows up as one page all footers overlapping at the bottom. If I comment out the position values, they show up on separate pages but the footer text doesn't go to the bottom.

Upvotes: 0

Views: 4763

Answers (1)

dlp
dlp

Reputation: 420

I came up with a solution, it is semi cross browser friendly except that different browsers seem to default to different print margins. It seems like .75in for IE, .4in for Chrome. It assumes 8.5x11 which makes it a little inflexible, but given the intention is printing you'll need to specify these kinds of things for your app.

<!DOCTYPE html>
<html>
<head>
    <title>Test of paging</title>
    <style type="text/css">
        @media screen {
            .page-footer, .page-break {
                display: none;
            }
        }

        @media print {
            body {
                /* Align first page to top */
                margin: 0;
            }

            .page-section {
                /* Specify physical size of page, margins may vary by browser */

                height: 9.5in; /* IE default margins are .75in */
                position: relative;
            }

            .page-footer {
                display: block;
                position: absolute;
                bottom: 0;
            }

            .page-break {
                page-break-before: always;
            }

        }
    </style>
</head>
<body>
<div class="page-section">
    <div>One</div>
    <div>Two</div>
    <div class="page-footer"><span class="footer-text">Footer one</span></div>
</div>
<div class="page-break"></div>
<div class="page-section">
    <div>Three</div>
    <div class="page-footer">Footer two</div>
</div>
</body>
</html>

Upvotes: 1

Related Questions