印刷する各ページのマージン/パディング (HTML/CSS) を設定するにはどうすればよいですか?

Question

ページには多くのコンテンツがありますが、どこで中断するかを制御できません。 position:fixed をヘッダー/フッターとして使用して各ページにコンテンツを配置しましたが、テキストと重なってしまいました。次の 2 つの方法で、マージンとパディングを使用して重複の問題を解決しようとしました。

@pageを使用して余白を追加する場合

リーリー

文字通り、すべてのページで機能しますが、ヘッダーとフッターも余白から消えてしまいます。

そこでbodyタグを使って余白を追加してみました

リーリー

最初のページに 2cm の上余白を追加し、最後のページに 2cm の下余白を追加することで機能します。ただしページ間ではありません。

各ページにマージン/パディングを設定することは可能ですか?

Answer 1

私もまったく同じ問題を抱えていて、いろいろ検索した結果、複合的な解決策を提供する興味深い記事を見つけました。ここで読むことができます。

つまり、2 つの方法を組み合わせたものです:

1. 使用ポジション: 固定テクノロジー

2. 使用thead tbody tfoot

最初の方法のみを使用すると、重複する問題が発生します。同様に、2 番目の方法のみを使用すると、フッターがページ コンテンツの下部に留まり、最終ページの先頭で終了する可能性がありますが、これらの組み合わせこれら 2 つの方法のいずれかで問題を解決できます。

リーリー リーリー

ここでは、動作する デモをご覧いただけます。

この解決策が機能することを確認するには、Print Me! ボタンを押して印刷してみてください。

フッターに ページ番号 を追加する必要がある場合もあります。これも CSS によって行われます。次の CSS を追加するだけです:

リーリー

一部の 記事 では、 content: counter(page) " of " counter(pages); ですが、私の場合、pages繰り返し返されます理由がないので無視しましたが、CSS var() を使用してカウントを実装して総ページ数を計算できるかもしれません。

記録のために、印刷前にヘッダーとフッターを確認したくない場合は、次の CSS を追加できます:

リーリー

2020 アップデート:

ページ番号が機能しなくなったようです。