今回は印刷対応 print.css について。
Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。
現象が起きるHTMLデモ
現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」毎に「page-break-after:always;」をかけています。（下記画像の赤い線の箇所）
|
1 2 3 4 5 6 7 8 |
/* 印刷時、page-break-afterで改ページ */ @media print{ #contents #rightContents p{ page-break-after:always !important; } } |
実際に開いて印刷プレビューしてみると、FirefoxやIEでは上手に改ページできています。
Chromeでは改ページができていません。
原因はfloat
調べたところ、どうやら原因は親要素のfloatのようです。左ナビがある構成の場合、コンテンツをdivでくくって左右にfloatをかけていると思います。これをfloatではなく「display:table-cell;」を使用して印刷時だけtableのセルにしてやります。▼親要素にfloatがかかっているので…
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 親要素のfloat */ #contents #leftContents{ display:block; float:left; width:300px; } #contents #rightContents{ display:block; float:right; width:620px; padding:40px; } |
▼印刷時だけ解除してtable-cellに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 印刷時 */ @media print{ #contents #leftContents, #contents #rightContents{ display:table-cell; vertical-align:top; float:none; } #contents #rightContents p{ page-break-after:always !important; } } |
現象が起きないHTMLデモ
今回はこちらで解決しました。他の原因としては、positionがかかっていると効かないなどあるらしいので、どんどんtable cellに変更しましょう。
お役に立てますと幸いです。
