Question

我需要完成的工作

我有一个打印在纸上的网页。在屏幕上查看时，我不需要任何页脚。当在纸上打印出来时，除了最后一页之外，我希望同样的页脚出现在每个人身上，并且最后一页出现不同的页脚。理想情况下，这将支持现代浏览器，但也可以使用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>

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

Answer 1

我提出了一个解决方案，它是半跨浏览器友好的，除了不同的浏览器似乎默认为不同的打印边距。对于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>

在所有页面上都需要CSS打印页脚，但最后一个页面上有不同的页脚

1 个答案: