ページには多くのコンテンツがありますが、どこで中断するかを制御できません。 position:fixed をヘッダー/フッターとして使用して各ページにコンテンツを配置しましたが、テキストと重なってしまいました。次の 2 つの方法で、マージンとパディングを使用して重複の問題を解決しようとしました。
@pageを使用して余白を追加する場合
リーリー文字通り、すべてのページで機能しますが、ヘッダーとフッターも余白から消えてしまいます。
そこでbodyタグを使って余白を追加してみました
リーリー最初のページに 2cm の上余白を追加し、最後のページに 2cm の下余白を追加することで機能します。ただしページ間ではありません。
各ページにマージン/パディングを設定することは可能ですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私もまったく同じ問題を抱えていて、いろいろ検索した結果、複合的な解決策を提供する興味深い記事を見つけました。ここで読むことができます。
つまり、2 つの方法を組み合わせたものです:
使用
ポジション: 固定テクノロジー使用
thead tbody tfoot最初の方法のみを使用すると、重複する問題が発生します。同様に、2 番目の方法のみを使用すると、フッターがページ コンテンツの下部に留まり、最終ページの先頭で終了する可能性がありますが、これらの組み合わせこれら 2 つの方法のいずれかで問題を解決できます。
ここでは、動作する デモをご覧いただけます。
この解決策が機能することを確認するには、
Print Me!ボタンを押して印刷してみてください。フッターに ページ番号 を追加する必要がある場合もあります。これも CSS によって行われます。次の CSS を追加するだけです:
リーリー一部の 記事 では、
content: counter(page) " of " counter(pages);ですが、私の場合、pages繰り返し返されます理由がないので無視しましたが、CSS var() を使用してカウントを実装して総ページ数を計算できるかもしれません。記録のために、印刷前にヘッダーとフッターを確認したくない場合は、次の CSS を追加できます:
リーリー2020 アップデート:
ページ番号が機能しなくなったようです。