CSS 从 window.print() 中删除页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8228088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove header and footer from window.print()
提问by Viralk
I am using window.print() for printing page, but I got header and footer contains page title, file path, page number and date. How to remove them?
我正在使用 window.print() 打印页面，但我得到的页眉和页脚包含页面标题、文件路径、页码和日期。如何删除它们？
I tried print stylesheet also.
我也试过打印样式表。
#header, #nav, .noprint
{
display: none;
}
Please help. Thanks.
请帮忙。谢谢。
回答by diego nunes
In Chrome it's possible to hide this automatic header/footer using
在 Chrome 中，可以使用以下方法隐藏此自动页眉/页脚
@page { margin: 0; }
Since the contents will extend to page's limits, the page printing header/footer will be absent. You should, of course, in this case, set some margins/paddings in your body element so that the content won't extend all the way to the page's edge. Since common printers just can't get no-margins printing and it's probably not what you want, you should use something like this:
由于内容将扩展到页面的限制，页面打印页眉/页脚将不存在。当然，在这种情况下，您应该在 body 元素中设置一些边距/填充，以便内容不会一直延伸到页面的边缘。由于普通打印机无法进行无边距打印，而且这可能不是您想要的，因此您应该使用以下内容：
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
As Martinpointed out in a comment, if the page have a long element that scrolls past one page (like a big table), the margin is ignored and the printed version will look weird.
正如马丁在评论中指出的那样，如果页面有一个长元素滚动超过一页（如大表格），则边距将被忽略，打印版本会看起来很奇怪。
At the time original of this answer (May 2013), it only worked on Chrome, not sure about it now, never needed to try again. If you need support for a browser that can't hable, you can create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it), but that's a huge hassle.
在这个答案的原始时间（2013 年 5 月），它只适用于 Chrome，现在不确定，永远不需要再试一次。如果您需要支持无法运行的浏览器，您可以即时创建 PDF 并打印（您可以创建一个自打印的 PDF 嵌入 JavaScript），但这是一个巨大的麻烦。
回答by l2aelba
Firefox :
火狐：
- Add
moznomarginboxesattribute in<html>
- 添加
moznomarginboxes属性<html>
Example :
例子 ：
<html moznomarginboxes mozdisallowselectionprint>
回答by Rudias
I am sure Adding this code on your css file will solve the problem
我相信在您的 css 文件中添加此代码将解决问题
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
回答by Nick Panov
Today my colleague stumbled upon the same issue.
今天我的同事偶然发现了同样的问题。
As the "margin:0" solution works for chromium based browsers, however, Internet Explorercontinue to print footer even if @page margins are set to zero.
然而，由于“margin:0”解决方案适用于基于铬的浏览器，即使 @page margins 设置为零，Internet Explorer也会继续打印页脚。
The solution (more of a hack) was to put negative margin on the @page.
解决方案（更像是一个黑客）是在@page 上设置负边距。
@page {margin:0 -6cm}
html {margin:0 6cm}
Please note that negative margin won't work for Y axis, only for X
请注意，负边距不适用于 Y 轴，仅适用于 X
Hope it helps.
希望能帮助到你。
回答by Hossein Ghaem
The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
CSS 标准支持一些高级格式。CSS 中有一个 @page 指令，它启用一些仅适用于分页媒体（如纸张）的格式。参见http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>and for firefox use it
和 Firefox 使用它
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383(view page source :: tag HTML).
在 Firefox 中，https: //bug743252.bugzilla.mozilla.org/attachment.cgi ?id=714383（查看页面源 :: 标记 HTML）。
In your code, replace <html>with <html moznomarginboxes mozdisallowselectionprint>.
在您的代码中，替换<html>为<html moznomarginboxes mozdisallowselectionprint>.
回答by Sheak Abdulla
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
回答by Yasitha
This will be the simplest solution. I tried most of the solutions in the internet but only this helped me.
这将是最简单的解决方案。我尝试了互联网上的大多数解决方案，但只有这对我有帮助。
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
回答by Sammi
@page { margin: 0; }works fine in Chrome and Firefox. I haven't found a way to fix IE through css. But you can go into Page Setup in IE on your own machine at and set the margins to 0. Press alt and then the file menu in the top left corner and you'll find Page Setup. This only works for the one machine at a time...
@page { margin: 0; }在 Chrome 和 Firefox 中工作正常。我还没有找到通过 css 修复 IE 的方法。但是您可以在自己的机器上进入 IE 中的页面设置并将边距设置为 0。按 alt，然后按左上角的文件菜单，您将找到页面设置。这一次只适用于一台机器......
回答by lwinkler
I was trying to remove the header and footer of a html page that I printed manually.
我试图删除我手动打印的 html 页面的页眉和页脚。
No solution on this page worked for me but simply by defining my own footer as explained hereFirefox would not add its own header and footer.
此页面上没有任何解决方案对我有用，而只是按照此处的说明定义我自己的页脚，Firefox 不会添加自己的页眉和页脚。
This does not work on Chrome unfortunately.
不幸的是，这不适用于 Chrome。
In CSS:
在 CSS 中：
@media screen {
div.divFooter {
display: none;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
Add this to your HTML:
将此添加到您的 HTML：
<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
回答by Nikhilus
1.For Chrome & IE
1.适用于 Chrome 和 IE
<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
- For FireFox as l2aelba said,
- 对于 l2aelba 所说的 FireFox，
Add moznomarginboxes attribute in Example :
在示例中添加 moznomarginboxes 属性：
<html moznomarginboxes mozdisallowselectionprint>
