javascript CSS：从打印预览 Chrome 禁用页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11503217/
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
CSS: Disable Header & Footer From Print Preview Chrome
提问by Niks Jain
one of my application is web based POS(Point Of Sale). so while printing invoices in chrome. the page header and the page footer automatically inserted by the browser that I want to supress via the page and without user intervention..
我的应用程序之一是基于网络的 POS（销售点）。所以在用 chrome 打印发票时。由浏览器自动插入的页眉和页脚，我想通过页面压制而无需用户干预..
I applied some CSSover-here in print-media,
我在印刷媒体上应用了一些CSS，
@media print {
#header, #footer {
visibility: hidden !important;
display: none !important;
}
}
But it's not applying, maybe the selector isn't correct?
但它不适用，也许选择器不正确？
And I also tried by reducing the margin as well, but its cutting/ overriding the page-content, if print has multiple pages.. And one more thing, i don't want to disable the print preview option for chrome..
而且我也尝试过减少边距，但是如果打印有多个页面，它会剪切/覆盖页面内容.. 还有一件事，我不想禁用 chrome 的打印预览选项..
Any one has good solution for this?
有没有人对此有好的解决方案？
Best Regards..
最好的祝福..
回答by Michael
use
利用
@page{margin:0px auto;}
in your css script. This will most likely throw off your page layout when printing, so you'll probably want to add a #container div with the correct padding to make your page look good again. Only tested on Google Chrome.
在你的 css 脚本中。这很可能会在打印时破坏您的页面布局，因此您可能希望添加一个具有正确填充的 #container div，以使您的页面再次看起来不错。仅在 Google Chrome 上测试。
回答by diego nunes
. . I'm not sure how knowledgeable you are in development, but the CSS selectores must match some elements. The [page] "header" and [page] "footer", as in "[printed] page", not as in "[web] page", can't be targeted by CSS like that--especially not with arbitrarily chosen IDs, and ones that would probably collide with your own page IDs and that browser vendors would never accept to implement.
. . 我不确定您在开发方面的知识渊博，但 CSS 选择器必须匹配某些元素。[page] “header” 和 [page] “footer”，如在“[printed] page”中，而不是在“[web] page”中，不能像那样被 CSS 定位——尤其是不能随意选择ID，以及那些可能与您自己的页面 ID 发生冲突并且浏览器供应商永远不会接受实施的 ID。
. . The suggestion of using "margin: 0 auto;" on a "@page" directive is actually correct (since the browser doesn't have enough margin for them to show, it will just hide them). The problem is that currently only Chrome supports it correctly. With other browsers you have no good options besides creating a PDF and printing it. You can create a self-printable PDF that will show the print dialog as soon as it loads up using JavaScript embedded on it, though, but I think it's the farthest you can go.
. . 使用“margin: 0 auto;”的建议 在“@page”指令上实际上是正确的（因为浏览器没有足够的余量来显示它们，它只会隐藏它们）。问题是目前只有 Chrome 正确支持它。对于其他浏览器，除了创建 PDF 并打印之外，您别无选择。不过，您可以创建一个可自行打印的 PDF，它会在使用嵌入其中的 JavaScript 加载后立即显示打印对话框，但我认为这是您所能做到的最远的距离。
. . Good luck.
. . 祝你好运。
