blocks|key|1139224|text|似乎Chromewebkit有不同的处理位置的方式:固定在打印样式表中，而不是其他浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1139225|所以这个问题目前的答案是：|1139226|在Chrome中没有足够的解决方案。|1139227|FF和IE在每个页面上都显示它，而Opera根本不显示它，而webkit浏览器只在第一个页面显示它。|1139228|小测试文件：|1139229|​|1139230|++++<!DOCTYPE+HTML>
++++<html+lang="en-US">
++++<head>
++++	<meta+charset="UTF-8">
++++	<title>print+css+test+by+mtness</title>
++++	<style+type="text/css">
++++	@media+print+{
++++		#watermark+{+
++++			display:+block;
++++			position:+fixed;
++++			top:+0;
++++			right:+0;
++++			z-index:+5;
++++		}
++++
++++		p+{+
++++			position:+relative;
++++			top:+40pt;
++++			display:+block;
++++			page-break-after:+always;
++++			z-index:+0;
++++		}
++++	}
++++	</style>
++++</head>
++++<body>
++++	<div+id="watermark">AWESOME!</div>
++++	<p>page1</p>
++++	<p>page2</p>
++++	<p>page3</p>
++++</body>
++++</html>|code-block|syntax|javascript|1139231|1139232|可以在此处找到更多资源：|1139233|http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/|offset|length|1139234|http://css-discuss.incutio.com/wiki/Printing_Headers|1139235|http://www.andypemberton.com/css/print-watermarks-with-css/|1139236|测试页面：|1139237|http://www.andypemberton.com/sandbox/watermark/|1139238|HTH。向您致以亲切的问候，先生。|1139239|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|0|0|0|0|0|0|0|0|0|0|2A|0|0|0|1G|1|0|0|1N|2|0|0|0|1B|3|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1M|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1N|8|@]|9|@]|A|$O|P]]|$1|Q|3|K|5|6|7|1O|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1P|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1Q|8|@]|9|@$V|1R|W|1S|1|1T]]|A|$]]|$1|X|3|Y|5|6|7|1U|8|@]|9|@$V|1V|W|1W|1|1X]]|A|$]]|$1|Z|3|10|5|6|7|1Y|8|@]|9|@$V|1Z|W|20|1|21]]|A|$]]|$1|11|3|12|5|6|7|22|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|23|8|@]|9|@$V|24|W|25|1|26]]|A|$]]|$1|15|3|16|5|6|7|27|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|U]]|1E|$5|1A|1B|1C|A|$1D|Y]]|1F|$5|1A|1B|1C|A|$1D|10]]|1G|$5|1A|1B|1C|A|$1D|14]]]]

<p>It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.</p>

<p>So the current answer to this question is:<br />
There is no adequate solution for this in Chrome.</p>

<p>Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.</p>

<p>small test file:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE HTML&gt;
    &lt;html lang="en-US"&gt;
    &lt;head&gt;
    	&lt;meta charset="UTF-8"&gt;
    	&lt;title&gt;print css test by mtness&lt;/title&gt;
    	&lt;style type="text/css"&gt;
    	@media print {
    		#watermark { 
    			display: block;
    			position: fixed;
    			top: 0;
    			right: 0;
    			z-index: 5;
    		}
    
    		p { 
    			position: relative;
    			top: 40pt;
    			display: block;
    			page-break-after: always;
    			z-index: 0;
    		}
    	}
    	&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    	&lt;div id="watermark"&gt;AWESOME!&lt;/div&gt;
    	&lt;p&gt;page1&lt;/p&gt;
    	&lt;p&gt;page2&lt;/p&gt;
    	&lt;p&gt;page3&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>further resources might be found here:<br />
<a href="http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/" rel="nofollow noreferrer">http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/</a><br />
<a href="http://css-discuss.incutio.com/wiki/Printing_Headers" rel="nofollow noreferrer">http://css-discuss.incutio.com/wiki/Printing_Headers</a><br />
<a href="http://www.andypemberton.com/css/print-watermarks-with-css/" rel="nofollow noreferrer">http://www.andypemberton.com/css/print-watermarks-with-css/</a><br /></p>

<p>test page:<br />
<a href="http://www.andypemberton.com/sandbox/watermark/" rel="nofollow noreferrer">http://www.andypemberton.com/sandbox/watermark/</a></p>

<p>HTH.
Kind regards, mtness.</p>


blocks|key|924725|text|这是我使用的代码。请注意，我将html和body+height都设置为100%25。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|924726|@media+print+{
++html,+body+{
++++width:+100%25;
++++height:+100%25;
++++margin:+0;
++++padding:+0;
++}
++#footer+{
++++position:+absolute;
++++bottom:+0;
++}
}|code-block|syntax|javascript|924727|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the code i use. Note I am setting both html and body height to 100%.</p>

<pre><code>@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}
</code></pre>


blocks|key|924771|text|我使用表格实现了这一点，但仅适用于chrome中的标题。我把重复的内容放在and标签上，把页面内容放在tbody里，所以浏览器的解释是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|924772|但是，我在大内容HTML中遇到了一个bug。在某些情况下，内容与标题重叠。在我发布这篇文章的日期，仍然没有找到解决方案。|924773|When+printing+tables+in+Google+Chrome,+content+overlaps+header|offset|length|924774|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/45555419/when-printing-tables-in-google-chrome-content-overlaps-header^0|0|0|0|1Q|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I accomplished that using tables, but only for headers in chrome. I placed the repeating content on thead tag and the page content in tbody, so the browser interpreted correct.</p>

<p>However, I have encountered a bug in large contents HTML. In some cases, the content overlapped the header. In the date that I'm posting this, still not found a solution.</p>

<p><a href="https://stackoverflow.com/questions/45555419/when-printing-tables-in-google-chrome-content-overlaps-header">When printing tables in Google Chrome, content overlaps header</a></p>


blocks|key|924786|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|924787|	++	++thead.report-header+{
+++display:+table-header-group;
}

tfoot.report_footer_Mh+{
+++display:table-footer-group;

}

	++tabel.report-container+{
++++page-break-after:+always;
}|code-block|syntax|javascript|924788|<table+class="report-container"++cellpadding="4"+cellspacing="0"+width="790"+align="center"+background=""+style="word-break:+break-word">
++
++
++<thead+class="report_header_Mh">
++++<tr>
++++++<th+class="report_header_cell_Mh">+
++++++++<div+class="header_info_Mh">
++++++++++
++++++++</div>
++++++</th>
++++</tr>
++</thead>
+++
++
++
++<tbody+class="report_content_Mh">
++++<tr>
++++++<td+class="report_content-cell_Mh">
++++++<div+class="main_Mh">
+++++++
++++++</div>
++++++</td>
++++</tr>
++</tbody>
+++
++
++
++<tfoot+class="report_footer_Mh">
++++<tr>
++++++<td+class="report_footer-cell_Mh">
+++++++++<div+class="footer_info_Mh">
++++++++++
++++++++</div>
++++++++</td>
++++</tr>
++</tfoot>
++
</table>

	+

It+worked+for+me+try+this+way|924789|924790|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>	  	  thead.report-header {
   display: table-header-group;
}

tfoot.report_footer_Mh {
   display:table-footer-group;

}

	  tabel.report-container {
    page-break-after: always;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="report-container"  cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word"&gt;
  
  &lt;!-- place the header part here--&gt;
  &lt;thead class="report_header_Mh"&gt;
    &lt;tr&gt;
      &lt;th class="report_header_cell_Mh"&gt; 
        &lt;div class="header_info_Mh"&gt;
          
        &lt;/div&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;!-- Header Ends here--&gt; 
  
  &lt;!-- Place the Main Content here--&gt;
  &lt;tbody class="report_content_Mh"&gt;
    &lt;tr&gt;
      &lt;td class="report_content-cell_Mh"&gt;
      &lt;div class="main_Mh"&gt;
       
      &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;!-- Main Content ends here--&gt; 
  
  &lt;!--Place Footer content here--&gt;
  &lt;tfoot class="report_footer_Mh"&gt;
    &lt;tr&gt;
      &lt;td class="report_footer-cell_Mh"&gt;
         &lt;div class="footer_info_Mh"&gt;
          
        &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;!-- Footer Ends here--&gt;
&lt;/table&gt;

	 

It worked for me try this way</code></pre>
</div>
</div>
</p>


<p>Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest  will support it very easily but still it isn't. I Tried out &lt;thead>,&lt;tfoot>&lt;tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.</p>


Print footer on every printed page from website, across all browsers (Chrome)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

亲爱的各位，我试过CSS Position: Fixed Property，但它在火狐和IE(IE6的黑客)上工作正常，但它在Chrome上完全不起作用。我以为Chrome是最新的可以很容易地支持它，但它仍然不是。我试过了，同样可以在IE和Firefox上工作，但在Chrome上有问题。请任何人有一个替代的解决方案。

问跨所有浏览器在网站的每个打印页面上打印页脚(Chrome)
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问跨所有浏览器在网站的每个打印页面上打印页脚(Chrome)EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问跨所有浏览器在网站的每个打印页面上打印页脚(Chrome)
EN