ブラウザの印刷プレビューでハマったことメモ

全ブラウザで白紙の2ページ目が印刷される。表示は1ページに収まってるのに。

htmlとbodyにheight:100%;をかけていたのが原因でした。

印刷時はheight:auto;にするようにしたら解決しました。

@media print{
  html,body{
    height: auto;
  }
}

全体の拡大率を調整するために

@media print{
  .section_print{
    transform: scale(2) translate(0, 25%);
  }
}

をかけていたのが原因でした。

拡大率で表示調整するのをやめて、幅を%指定にして、印刷時のフォントサイズを大きくするなどCSSを作り直しました。

印刷対応ページを作る時は、比率調整でリサイズできる作りにした方が後々の追加削除などの更新でも調整しやすくていいなと思いました。（scale調整はブラウザによって拡大率に差があるし）