- ベストアンサー
iflameのスクロールバーについて
ページ内に、iflameでページを表示しようとしています。 縦に長いページなので、縦にだけスクロールバーを出したいのですが… <iframe src="http://...." width="600" height="400" scrolling="yes"></iframe> こんな感じに設定しています。 ウィンドウズIEではキレイに見えています。 ですが、マッキントッシュIEで見ると、スクロールバーが表示されません。 <iframe src="http://...." width="600" height="400" scrolling="auto"></iframe> にすると、マッキントッシュIEでもスクロールバーがきれいに表示されるのですが、 ウィンドウズIEで、必要のない下の部分（横部分）のスクロールバーまで出てしまいます。 この横スクロールバー、たとえ中味を短くしても、表示されるので…すごーく嫌なのです…。 マッキントッシュと、ウィンドウズ両方で、たて部分だけスクロールバーが出るようにする方法はあるのでしょうか？
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
こちらでMacとMacOSXで試しましたがスクロールバーが出ていました。 スクロールバーが出なかったOSとブラウザの種類とブラウザバージョンを書くと回答がえられやすいかもしれません。 一応検証用に作ったHTMLもはっつけておきます。 ------- 読み込み側(index.html) --------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <iframe src="test.html" width="600" height="400"> </iframe> </body> </html> ------- 読み込まれる側(test.html) --------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="overflow-y:scroll;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <p>ssss</p> <p> </p> <p>dddd</p> <p> </p> <p> </p> <p> </p> <p>ccccc</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>dddddd </p> </body> </html>
その他の回答 (8)
- quads
- ベストアンサー率35% (90/257)
可能なのであれば、ページを提示していただけますか？ 或いは、Macintoshでお使いのブラウザIEのversion、Windowsでお使いのブラウザIEのversionを教えていただけますか。 また、インラインフレームを設置しているページ及びインラインフレーム内に表示するページのドキュメントタイプも教えていただければ検証しやすいです。 特に調べなくても良いのであれば無視していただいても結構ですが…。
お礼
残念な事にちょっと、そのページ自体をお見せする事は出来ないのです… お仕事関係の事なので(T_T) mac ie 6.0 win ie 6.0 ドキュメントタイプは shtml です。 わがまま言ってすみません…
- Mulumba
- ベストアンサー率45% (27/59)
再び#1です。 MacOSXのIE5.2とサファリ、MacOS9のIE5.0でテストしてみましたが、#6の方法で縦スクロールバーだけ無事に表示されます。 ひょっとして、iframeに読み込むページが600X400に収まっているのではないでしょうか？ 試しにiframeに読み込むページの<BODY></BODY>の中身を<DIV style="width:600px; height:500px"></DIV>で囲ってみて試してみて下さい。
お礼
iframeに読み込むページは、600×400には収まってないです(^^ゞ ちゃんと下があるのに、スクロールバーがなくて見れない…という状態です。 マウスで文字を選択して、ぐぐぐぐぐっ…としたに無理やり引っ張ると、スクロールじみた感じで動いたりもしますが…
補足
ちなみになんですが… <iframe>のscrollを[yes]から[auto]にすると表示されます…。 何がどう悪いのだか…
- Mulumba
- ベストアンサー率45% (27/59)
再び#1ですが、単純にiframeが読み込むページの横幅を600px以下に制限し、 <iframe src="http://...." width="600" height="400" style="overflow: auto;" ></iframe> としてみたらどうですか？iframewをブロック要素で囲む必要はなかったようです。
お礼
ページの半分以下の長さにしてみて試しても見ましたが…やはりダメでした…。 なかなか難しいですね…。
- pchan0022000
- ベストアンサー率42% (112/261)
iframeで設定しているHTMLの中味を変更するであってます。 たとえば <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>・・・（中略）・・・</html> というHTMLだったら。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="overflow-y:scroll;"> ・・・（中略）・・・</html> こんな感じです。
お礼
ありがとうございます！ しかしながら…残念ながら、マッキントッシュでやはりスクロールバーが表示されませんでした…。 どうもありがとうございました。
- pchan0022000
- ベストアンサー率42% (112/261)
iframeのsrcで指定している読み対象のHTML要素を <html style="overflow-y:scroll;"> に変えてみてください。
補足
すみません、参考ＵＲＬも見てみたのですが…ちょっとわかりませんので質問させてください… HTML要素を <html style="overflow-y:scroll;"> とのことですが… いったいどこに、何を設定すればよいのでしょうか？ iframeで設定しているHTMLの中味を変更するのでしょうか…？ 基本的な事もわかっていなくてすみません…
- Mulumba
- ベストアンサー率45% (27/59)
#1ですが、iframeのheightを必要なだけの大きい数、400よりも大きな数にすれば縦スクロールバーが出現するのではないかと思います。
お礼
ええっと、マッキントッシュでは画面以上に縦に長くてもスクロールバーが表示されない状態です(^^ゞ ある意味、縦幅内に収まっていたら、スクロールバーは表示されないほうがよかったりします。
- moon_night
- ベストアンサー率32% (598/1831)
＞マッキントッシュと、ウィンドウズ両方で、たて部分だけスクロールバーが出るようにする方法はあるのでしょうか？ マイクロソフトを抗議する・・・無理か。 強引に普通のフレームを複雑に切ってインラインフレームっぽく見せる・・・というのはダメか。
お礼
本当に…講義したくなります(^^ゞ 普通のフレームで組むのも考えました…。 ソレが一番早いかなぁ…と…。 いい解決方法があれば一番なのですが。
- Mulumba
- ベストアンサー率45% (27/59)
<DIV style="width: 600px; height: 400px; overflow: auto; overflow-x: hidden;"> <iframe src="http://...." width="600" height="400" scrolling="no"></iframe> </DIV> のように、iflameをブロック要素で囲み、ブロック要素にスタイルシートでスクロールバーをつけてみたらどうでしょうか。 自信はありませんが。
お礼
試してみましたが、スクロールバー自体がうまく表示できませんでした(^^ゞ なかなかうまくいかない、難しい問題ですね…
お礼
ＭＡＣはＯＳ９で、ＩＥ６です。 うう～ん、おかしいですね…ひょっとしてキャッシュとかが残っているのが問題なのでしょうか…。 最新に更新…ってやっているのですが…。 読み込み側の<iframe>を<div>タグでくくっているのがもんだいなのかもしれません(^^ゞ <div>タグで、大きさを指定しているので…。 もう少し思考してみます。
補足
何回か同じ事を繰り返したら、成功しました！！ どうもありがとうございました。 マックのキャッシュが残っていたのも問題のようで…(^^ゞ 本当にありがとうございました。