0

我需要完成什么

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

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

4

1 回答 1

1

我想出了一个解决方案，它是半跨浏览器友好的，只是不同的浏览器似乎默认使用不同的打印边距。IE 似乎是 0.75 英寸，Chrome 是 0.4 英寸。它假定为 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>
于 2013-05-05T21:32:20.297 回答