【再質問/完全解決で500ポイント】【print.css】超縦長のiframeが含まれるページを、IE6〜8、Firefox全てで正常に印刷する方法はあるでしょうか。

通常の記述では1ページ目のみ印刷され、残りが印刷されません。

■条件
・横幅はプリント用紙にfixするぐらいでの印刷サイズを想定(IE6にて横幅がオーバーするのはそのままでOK)。縮小して1ページにすべて表示させるのはNGです。
・印刷時に最低3ページ以上に印刷される縦幅のiframeサイズを想定。
・できればhtml、cssのみでの対応(JSを使わない)。ブラウザ毎のCSSハック可。
 (※JSを利用しての解決は、通常分割ポイントとさせていただきます)
・iframe以外の要素の利用可(例えば同サイズの要素を絶対配置で下に重ねるなど)。


以下、サンプルソースです─────────────

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<iframe src="
http://mymd.microdiet.jp/campaign/supple_calorie50_01/" frameborder="0" class="test" width="850" height="10000"></iframe>
</body>
</html>

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/05/14 14:15:56
  • 終了:2011/05/17 20:59:30

回答(1件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/14 14:50:26

ポイント200pt

ブラウザがBODY全体の高さを求める際に「IFRAMEの高さを用いることは出来ないよう」なので下記のように決め打ちで対応するしかなさそうです

<body style="height:10100px">
<iframe src="省略" frameborder="0" class="test" width="850px" height="10000px"></iframe>
</body>

BODYとIFRAMEの高さの差は適当に100pxにしてますので、デザイン(マージンやパディング)にあわせて調整してください

id:forcutie

ブラウザ、印刷プレビューなどでご覧になりましたか?

理論上はそうなのでしょうが、IE6〜8、Firefoxすべてにおいて印刷時への改善はありませんでした。

(2ページ目以降が表示されない、もしくは印刷されない)

引き続き、回答を募集します

2011/05/14 15:51:37
  • id:forcutie
    現在の状況:
    IE6、IE7、Firefox4→印刷枚数が1枚となる。
    IE8→印刷枚数はページ分だが、印刷されるのは1ページ目のみ。

    試してみたこと:
    iframeと同サイズのspacer.gifをiframeの下に絶対配置
    →IE6〜8、Firefoxにて印刷枚数=ページ分となるものの、実際に印刷されるのは1ページ目のみ。

この質問への反応(ブックマークコメント)

トラックバック

  • スーパーpre記法(シンタックス・ハイライト)の背景が黒くなって見にくい、というのは既出ですか? 例えば http://q.hatena.ne.jp/1305186890 とか http://q.hatena.ne.jp/1305350154 とか。 私の環境だけ?
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません