CSS：WEBサイト印刷時にページが切れる・崩れる・消える現象の対策

WEBサイトを制作していると、ページを印刷しようとしたときに一部分が消えたり、縦が切れたりしてしまうことがあるので、その対策メモ。

overflowプロパティに初期値（visible）以外を指定していることが原因でした。

以下コード。 印刷用CSS（@media print）にて、初期値であるvisibleを指定することで解決。

/* 印刷用 */
@media print {
 body{
  overflow-y: visible;
  overflow-x: visible;
 }
 .divMain{
  overflow-y: visible;
 }
}

私はだいたい全体用CSSで「overflow-y:hidden; overflow-x:hidden;」と指定して、 各ページのスクロール部分で「overflow-y:auto;」と指定することが多いので、上記CSSのようになります。

ちなみに通常の「.divMain」CSSの下に記入しないと読み込み順的に反映されないので注意。

フッターを下部固定するために「min-height:calc(100vh - 500px);」などを指定していると、印刷時にフッターが半端に2枚目にはみ出たりするので、そういうときは印刷用CSSで「min-height:0;（初期値）」にしましょう。

反映されないときはキャッシュを消してみる。

あと検索していて見つけた興味深い印刷用プロパティ。

印刷時の改ページ位置を指定する。

たとえば下記のように指定すると、印刷時にh2タグごとにページが区切られる。

@media print {
 h2 {
  page-break-before: always;
 } 
}

※ always：強制的に改ページする

普通のWEBページならあまり出番はなさそうだけれど、章ごとに印刷するというときは便利かも。（そんな場面あるのか？） そのほかの値は下記リンク内参照。 http://www.htmq.com/style/page-break-before.shtml