印刷用CSSの設定

質問

現在、上からヘッダー、コンテンツ、フッターの3段構成で中央によせ、幅が833pxのサイトがあります。しかしながら印刷時に上部のヘッダー部と中央のコンテンツ部が分離した状態で印刷を余儀なくされます。そのようにならないページもありますが、回避方法をご存知の方がいらっしゃいましたら、ご教授願います。また、簡単に全体70%とかの指定で印刷ＣＳＳを作る記述等はございますでしょうか？
ご教授の程、よろしくお願いします。

回答No.2

abril

お悩みのポイントは：

> 印刷時に上部のヘッダー部と中央のコンテンツ部が分離した状態で印刷を余儀なくされます。そのようにならないページもありますが、回避方法をご存知の方がいらっしゃいましたら
（省略）
> ヘッダーとコンテンツが分離してしまうページとそうでないページに分かれます。どうも、コンテンツ部分のフロートが多いページほど崩れやすく、簡素なページほど崩れずヘッダーとコンテンツがきちんとくっつきます。これをどのように統一すべきか悩んでおります。

であって、

> 全体の幅が833pxありますので、右端が切れます。

についてはスルーして宜しいのですよね？

残念ですが、floatが絡んだ印刷結果を完全にコントロールすることは無理だと思います。ページ毎に違う結果が出てしまうのはいかんともし難いでしょう。コンテンツの内容に依存するので…印刷環境によっても全く結果が違ったりしますし。
page-break-before/page-break-afterという印刷時の改ページ部分を定義するプロパティもありますが、ユーザ側の印刷時のフォント・サイズ等の設定の違い等を考慮すると、挿入位置は限定されるでしょうし。「どのコンテンツも印刷時にはヘッダーの後／フッターの前に必ず改ページする」という様な指定なら使えると思いますが。

もしヘッダーの情報がそれほど重要でないのなら、いっそのこと印刷時にはヘッダーやフッター部分を"display: none;"で非表示にし、（内容的に最も重要だと思われる）「中央のコンテンツ部」だけをプリントさせる様に制御されては？スクリーン／プリントというメディアによって完全に別物として考え、それぞれに適した形態で表示する、という手法はよくありますので。

補足

ご回答有難う御座います。
実は、私もそのように考えていたところでした。
先方ありきの問題なので、説明しようと思います。

有難う御座いました。

回答No.1

mochitora

印刷用CSSの中で、
・3段構成それぞれの幅を70％に指定
・ヘッダー部とコンテンツ部のマージンを0に
で良いのでは？

どんな書き方をしているのかまったくわからないので、
印刷用外部CSS(のヘッダー部とコンテンツ部の)定義ソースを貼り付けると、
良い回答がもらえると思いますよ。

お礼

試してみましたが、コンテンツ内の要素がコンテンツ幅70%に押しつぶされ、縦並びになってしまいました。

補足

早速のご回答、有難う御座います。
print.cssを何も指定しないと、全体の幅が833pxありますので、右端が切れます。またヘッダー（833×119）、コンテンツ（833×自動）、フッター（833×115）ですが、ヘッダーとコンテンツが分離してしまうページとそうでないページに分かれます。どうも、コンテンツ部分のフロートが多いページほど崩れやすく、簡素なページほど崩れずヘッダーとコンテンツがきちんとくっつきます。これをどのように統一すべきか悩んでおります。