人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【再質問/完全解決で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>

●質問者: forcutie
●カテゴリ:インターネット
✍キーワード: Class CSS DTD firefox FIX
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● うぃんど
●200ポイント

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

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

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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ