- ベストアンサー
iframeのスクロールバー：縦だけを表示したい
インラインフレームで、縦だけスクロールさせたいのですが、横にもスクロールバーが表示されます。 インラインフレームを入れ込むテーブル幅より、 インラインフレーム自体のテーブル幅は小さくしてあるんですが、なぜなんでしょうか。過去ログをみてみたのですが解決しなかったので新たにアドバイスお願いします。
- niconico_1969
- お礼率54% (61/111)
- HTML
- 回答数6
- ありがとう数18
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ひょっとしてdoctype宣言で標準モード（TransitionalのURLつきか、strict）を選んでますか？ 確かこれで出るバグがあったと思います。 フレーム内のページに html{overflow-y: scroll;} を付け足すと消えるそうです。
その他の回答 (5)
- partita
- ベストアンサー率29% (125/427)
srcで読み込むページのスタイルに body{margin:0;padding:0;}を追加してください。
補足
marginは0にしていたのでpaddingを追加してみましたが変りありませんでした。 縦のスクロールバーの必要のないうちは、 横も表示されないのですが、 情報が増えて縦にスクロールが必要になると、 縦と共に横もバーが現れます。 overflow-x: hidden; を入れているんですが・・・。 今の状態はこれです。お気づきの点、あるでしょうか。何度もすみませんがよろしくお願いします。 【index.html】 --- <table width="280" border="0" cellpadding="0" cellspacing="0"><tr><td width="280"> <iframe src="iframe_whats.html" width="280" height="130" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe> </td></tr></table> 【news.html】 --- <style type="text/css"> <!-- body { margin: 0px; padding: 0px; font-size: 12px; overflow-x: hidden; } --> </style> </head> <body> <table width="260" border="0" cellpadding="0" cellspacing="0"><tr><td> ・ ・ ・ </td><tr></table> </body>
- yambejp
- ベストアンサー率51% (3827/7415)
なんか書式間違えているんじゃないですか？ ちなみに overflowはIE5.0以上しか対応していない機能のようです。 本当に以下のように書いてますか？ 例えばscrollingにyesを書いているとかポカはありませんか？ //main.htm <iframe SRC="source.htm" scrolling="AUTO" width=100 height=100></iframe> //source.htm <style type="text/css"> body { overflow-x: hidden; } </style> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br> test test test<br>
補足
記述に誤りはありませんでした。
- goldfox
- ベストアンサー率49% (123/249)
インラインフレームの中に表示するページの横幅が、フレームの横幅（－縦スクロールバーの幅）より大きく設定されていればスクロールバーは出ます。 出なければ、中のページのはみ出している場所を見ることができません。 ・フレームの中のページで横幅をフレームより小さく設定する。 （フレームの横幅が300pxなら、中のページは横幅280px以下に設定するとか。tableとかimgも280以下にする必要がある） ・フレームの横幅をスクロールが出ないくらいに広げる。 ・フレームの中に表示するページに「body { overflow-x: hidden; }」を指定する。 （先に書いた理由により、お勧めはできません）
補足
いずれも試していますがダメです・・。 もともと私が作ったサイトではないものの 更新作業なので、cssで何か設定があるかと思ったのですが特にスクロールバーやインラインフレーム、テーブルなど、関係する部分へのcssは見当たりませんでした。 なんなんでしょうか、、
- mi_ka_n
- ベストアンサー率44% (12/27)
テーブルのセルの中には余白や間隔があるからではないでしょうか？ 余分な余白や間隔を消すのであれば、 テーブルで設定されているようなので、 <table cellpadding="0" cellspacing="0"> <tr> 略・・・ 上のようにtableタグへ入れてみてください。 cellpadding（テーブルと文字の間のスペース） cellspacing="0"（セルの枠線の太さ） インラインフレーム側をさわるのであれば、下記のようにしてはどうでしょうか？ <IFRAME src="***.html" marginwidth="0" marginheight="0"></IFRAME> marginheight="インラインフレームの枠と内容の上下の間隔" marginwidth="インラインフレームの枠と内容の左右の間隔"
補足
いずれもダメでした、、 インラインフレーム自体のbodyタグにも上下左右のmarginを0にしているし、tableサイズは、iframeが入っているtd幅より少し小さくしてあります。 目でみても、フレームの右側は少し余裕があるくらいなのですが、スクロールしてわざわざその余白を見せてる、みたいになってます。 これまでこんなことなかったんですけど、、
- yambejp
- ベストアンサー率51% (3827/7415)
スタイルシートで横スクロールを消してみては いかがでしょうか？ <style type="text/css"> body { overflow-x: hidden; } </style>
補足
いれてみたけど消えません・・・。
お礼
できました！すごい！ バグの情報をご存知なんてすごいですね。 いわれなきゃ絶対気づきませんし、あきらめていました。心から、感謝です。