印刷する各ページの余白/パディングを設定します（html/css）？

Question

私はページ上に多くのコンテンツを持っています。私はそれがどこで壊れているのかを制御していません。そして、各ページにヘッダ/フッタとしてposition:fixedを使っていくつかのコンテンツを配置しましたが、テキストと重なっています。私はマージンとパディングを使って、次の2つの方法でオーバーラップを解決しようとしました。

私は@page

@page { 
    margin: 2cm; 
} 

を使用してマージンを追加すると、それが言うようにそれはすべてのページに動作しますが、私のヘッダーとフッターも離れマージンから取ら。

だから私はそれが最後のページに2センチメートルトップの最初のページの余白2cmの下マージンを追加することにより、作業bodyタグ

body { 
    margin: 2cm; 
    /* padding: 2cm; */ 
} 

を使用してマージンを加えてみました。しかし、ページ間ではありません。

各ページの余白/パディングを設定することはできますか？

Answer 1

あなたの最初のオプションは正しいですが、あなたがする必要があるのは、ヘッダとフッタをrunningと置くだけです。

@page { 
    margin: 2cm; 

    @top-center { 
     content: element(pageHeader); 
    } 

    @bottom-center { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

Answer 2

@page { 
    padding: 2cm; 
    margin: 3cm;  
} 

Answer 3

は、印刷のために割り当てられたスタイルシートを持っているようにしてください...これを試してみてください。 それは別のスタイルシート可能性があります。または、ブートストラップスタイルシートを使用することができます。

<link rel="stylesheet" type="text/css" media="print" href="print.css"> 

または

その後

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute 

は、あなたが別のスタイルシートやメディアクエリを使用して共有1でのプリンタのためのあなたのスタイルを書くことができます私は問題を理解してないんだけど、肝炎

@media print { 
/* Your styles here */ 

}