html - 需要 CSS 打印除最后一页以外的所有页面的页脚，最后一页不同的页脚-6ren

html - 需要 CSS 打印除最后一页以外的所有页面的页脚，最后一页不同的页脚

转载作者：太空宇宙更新时间：2023-11-04 15:05:20

我需要完成什么

我有一个打印在纸上的网页。在屏幕上查看时，我不需要任何页脚。当打印在纸上时，我希望除最后一页以外的所有人都出现相同的页脚，而最后一页有不同的页脚。理想情况下，这将支持现代浏览器，但也适用于 IE 7/8。

到目前为止我有什么

<!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>

目前，它显示为一页，所有页脚在底部重叠。如果我注释掉位置值，它们会显示在不同的页面上，但页脚文本不会到达底部。

最佳答案

我想出了一个解决方案，它是半跨浏览器友好的，除了不同的浏览器似乎默认为不同的打印边距。 IE 似乎是 .75in，Chrome 是 .4in。它假定为 8.5x11，这使得它有点不灵活，但鉴于意图是打印，您需要为您的应用指定这些类型的内容。

<!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>