2012-12-30 15 views
12

Webアプリケーションがあり、1ページを超える可能性があるレポートがあり、すべてのページにヘッダーとフッターを印刷したいと考えています。 これを見つけて試してみてください: Repeating a report header in each page 私はオペラ、IE9、Firefox、Google Chromeを試してみましたが... nothing.page-marginはうまく動作しますが、コンテンツは私が欲しいものです。仕事。各ページのヘッダーとフッター(CSS付き)

+0

[HTMLを使用してドキュメントの各ページにヘッダーとフッターを印刷する方法は?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-ヘッダーとフッターに印刷されたページのすべて) – Quentin

答えて

13

それは例

<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 */ 
    } 
} 
+0

Webkitでは動作しますか? –

+0

@PauFracés以前はサポートされていませんでしたが、現状については不明です。私はfirefoxの方法でこれを使用していましたので、これが彼を助けるかもしれないと考えました –

+0

私は同じ話題に取り組んでいます。私はhtml + cssでそれを行うことができませんでしたので、私は仕事を終わらせるためのjavascriptライブラリで今働いています。したがって私の興味 –

5

について各ページ

に繰り返されるように、あなたは私は本当にお返事に感謝しかし、私は、このソリューション(位置:固定)を使用しているposition: fixed;ヘッダーとフッターを設定することができます前に、ページの内容はヘッダーでマスクされます。だから私は "マージン"プロパティと "コンテンツ"は動作しませんまたは他の言葉で私は私が望む結果に到達することはできませんと動作する "@ページ"を使用する必要があります。

+3

'position:fixed'で動作します。たとえば、* @ page:margin-top:2mm *の余白を設定する場合は、htmlページを* html:margin-top:20mm *に、固定ヘッダーを* header:margin:0 *に圧縮します。これは固定ヘッダーを2mmのページ余白に置きますが、ページの内容はhtmlマージン20mmに従います。プリントアウトしてもオーバーラップはありません。 – frequent

+0

ありがとう!このコメントは私のためにそれをしました! –

+0

'html'マージンは巧妙なトリックです。仕事が盛り上がるあなたはそれを印刷ページごとに変更できるかどうか分かりますか? – ppumkin

関連する問題