隐藏html页面中的某些字段以用于打印布局中的页眉/页脚

hiding certain fields in html page to use for header/footer in print layout

本文关键字：布局 打印 页脚 用于 html 隐藏 字段      更新时间：2023-09-26

我一直在制作打印布局，我了解如何使用@media打印标记。我想做的是在打印布局中使用与实际页面不同的页眉/页脚。我将不同的页眉/页脚放在原始页面上，但我在试图隐藏实际页面上的其他字段时遇到了问题。

HTML:

<div class=different_header>Different content</div>
<div class=different_footer>Different content</div>

CSS：

.different_header, .different_footer {
    display: none;
}
@media print{
.different_header {
        position: fixed;
        top: 0;
    }
.different_Footer {
        position: fixed;
        bottom: 0;
    }
}

我试过这个。。。。但到目前为止没有

因为你告诉它隐藏，所以除非你告诉它显示自己，否则它不会显示：

.different_header, .different_footer {
    display: none;
}
@media print{
    .different_header, .different_footer {
        display: block; /* <------------------- HERE */
    }
    .different_header {
        position: fixed;
        top: 0;
    }
    .different_footer {
        position: fixed;
        bottom: 0;
    }
}
相关文章：