微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css-paged-media – 页面和页脚在每个页面以打印模式与css

我有一个Web应用程序,它有一个可能超过一页的报告,我想在每个页面打印页眉和页脚.
我找到并尝试这样:
Repeating a report header in each page
但它没有为我工作.我尝试歌剧,IE9,Firefox,谷歌浏览器,但…没有.页边距工作正常,但内容是我想要的,它不起作用.

解决方法

你可以设置一个位置:固定;页眉和页脚,以便在每个页面上重复

例如

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

@media screen {
    header.onlyprint,footer.onlyprint{
        display: none; /* Hide from screen */
    }
}

@media print {
    header.onlyprint {
        position: fixed; /* display only on print page (each) */
        top: 0; /* Because it's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}

原文地址:https://www.jb51.cc/css/216128.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。