• ベストアンサー

iframeのスクロールバー：縦だけを表示したい

インラインフレームで、縦だけスクロールさせたいのですが、横にもスクロールバーが表示されます。 インラインフレームを入れ込むテーブル幅より、 インラインフレーム自体のテーブル幅は小さくしてあるんですが、なぜなんでしょうか。過去ログをみてみたのですが解決しなかったので新たにアドバイスお願いします。

  • HTML
  • 回答数6
  • ありがとう数18

質問者が選んだベストアンサー

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.6

ひょっとしてdoctype宣言で標準モード（TransitionalのURLつきか、strict）を選んでますか？ 確かこれで出るバグがあったと思います。 フレーム内のページに html{overflow-y: scroll;} を付け足すと消えるそうです。

参考URL：
http://www.airemix.com/pukiwiki/pukiwiki.php?%5B%5BIETips%5D%5D#content_1_4
niconico_1969
質問者

お礼

できました！すごい！ バグの情報をご存知なんてすごいですね。 いわれなきゃ絶対気づきませんし、あきらめていました。心から、感謝です。

その他の回答 (5)

  • partita
  • ベストアンサー率29% (125/427)
回答No.5

srcで読み込むページのスタイルに body{margin:0;padding:0;}を追加してください。

niconico_1969
質問者

補足

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)
回答No.4

なんか書式間違えているんじゃないですか？ ちなみに 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>

niconico_1969
質問者

補足

記述に誤りはありませんでした。

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

インラインフレームの中に表示するページの横幅が、フレームの横幅（－縦スクロールバーの幅）より大きく設定されていればスクロールバーは出ます。 出なければ、中のページのはみ出している場所を見ることができません。 ・フレームの中のページで横幅をフレームより小さく設定する。 （フレームの横幅が300pxなら、中のページは横幅280px以下に設定するとか。tableとかimgも280以下にする必要がある） ・フレームの横幅をスクロールが出ないくらいに広げる。 ・フレームの中に表示するページに「body { overflow-x: hidden; }」を指定する。 （先に書いた理由により、お勧めはできません）

niconico_1969
質問者

補足

いずれも試していますがダメです・・。 もともと私が作ったサイトではないものの 更新作業なので、cssで何か設定があるかと思ったのですが特にスクロールバーやインラインフレーム、テーブルなど、関係する部分へのcssは見当たりませんでした。 なんなんでしょうか、、

  • mi_ka_n
  • ベストアンサー率44% (12/27)
回答No.2

テーブルのセルの中には余白や間隔があるからではないでしょうか？ 余分な余白や間隔を消すのであれば、 テーブルで設定されているようなので、 <table cellpadding="0" cellspacing="0"> <tr> 略・・・ 上のようにtableタグへ入れてみてください。 cellpadding（テーブルと文字の間のスペース） cellspacing="0"（セルの枠線の太さ） インラインフレーム側をさわるのであれば、下記のようにしてはどうでしょうか？ <IFRAME src="***.html" marginwidth="0" marginheight="0"></IFRAME> marginheight="インラインフレームの枠と内容の上下の間隔" marginwidth="インラインフレームの枠と内容の左右の間隔"

niconico_1969
質問者

補足

いずれもダメでした、、 インラインフレーム自体のbodyタグにも上下左右のmarginを0にしているし、tableサイズは、iframeが入っているtd幅より少し小さくしてあります。 目でみても、フレームの右側は少し余裕があるくらいなのですが、スクロールしてわざわざその余白を見せてる、みたいになってます。 これまでこんなことなかったんですけど、、

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

スタイルシートで横スクロールを消してみては いかがでしょうか？ <style type="text/css"> body { overflow-x: hidden; } </style>

niconico_1969
質問者

補足

いれてみたけど消えません・・・。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • iframeのスクロールバー

    iframeの中に、 縦のスクロールバーは出てもいいのですが 横のスクロールバーは出したくないので、表示するファイルはテーブルで幅を固定してるのですが、どうしても横にスクロールバーが出てしまいます。 でないものもあります・・・。 何がいけなくて横のスクロールバーが出てしまうのでしょうか？？ よろしくお願いいたします。 ↓こちらです。 http://sound.jp/goldcherry/hp/prof.html wearという欄にどうしても横スクロールバーが出てしまって困ってます。

  • スクロールバー

    インラインフレームの縦スクロールバーは表示して 横スクロールバーは表示しないようにするには どうしたらよいでしょうか？ フレームの枠を中に表示するHTMLのWIDHTより大きく 設定してるんですが、どうしても横スクロールが出て しまいます。 フレーム内に表示するページの幅って設定できるんですか？ 詳しい方よろしくお願いします。

  • 【ＩＥ】iframeで呼び出したＨＴＭＬの表示幅について

    こんにちは。質問させて下さい。 現在、http://yrotnus.web.fc2.com/testpage.html 上記のような構成のページを作っています。 （背景画像を、フレームをまたいで表示させるために、floatで左にコンテンツ、右にインラインフレームを配置しています） コンテンツをクリックしインラインフレームに内容を表示させているのですが、このページをＩＥ８で確認した際、 ■内容が画面を越えて表示され、横スクロールバーが出る。 ■横スクロールバーが出た状態でブラウザの幅を変えてみると、 　以降は呼び出したページが自動的に画面の幅に合う。 という状態になります。 firefoxでは、横スクロールバー自体表示されませんでした。 ＩＥでも横スクロールバーが出ないようにしたいのですが、どうすれば良いのでしょうか。 overflow-x: hidden以外の方法を探しています。 よろしければご回答願います。

  • インラインフレームのスクロールバーについて

    インラインフレームのスクロールバーが現れないようにしたいのです。それも、縦方向は残して、横方向のスクロールバーが出ないようにしたいのです。 MacのIEで確認すると（当方はMacintoshでホームページを作成しています）縦方向のみスクロールバーが現れ、横方向は現れません。がWindowsで確認すると縦横ともに現れるのです。 タグではautoとyesとnoしか制御する方法はないのでしょうか？ Javascriptなどでもかまいません。 どなたかご存じでしたら教えてください。お願いします（泣） ちなみにテーブルのセルの中に作っているのですが、タグはこんな感じです↓ <td width="104"> <iframe src="info.html" name="info" width="100%" height="92" frameborder="0"> <p>このページはインラインフレーム対応のブラウザでご覧ください。</p> </iframe> </td>

    • ベストアンサー
    • HTML
  • スクロールバー

    現在HPを製作しています。 その過程で出た問題なのですが何かヒントになるような情報があれば教えていただければと思い、質問します。 HPの型としては、フレームを使って上下に分割されたものです。 起こった問題の現象としては ・下フレームで縦にスクロールバーが発生した時に、（おそらくスクロールバーの幅分）横スクロールバーが出現してしまいます。 ・こうして発生した横スクロールバーはブラウザの横幅を広げても消えません。 ・縦スクロールバーが消えると同時に消えます。 どうにかして縦のスクロールバーが出ても横は出ないようにしたいのですが、現在ヒントとなるものがなく闇雲に原因を探している状態です。 もしこのような現象に対してヒントのようなものをお持ちの方がいましたら。 知恵を貸していただきたいと思います。 よろしくお願いします。

  • インラインフレームの横スクロールバーを消すには？

    インラインフレームを使用したＨＰから、ＦＣ２ブログを呼び出そうとしています。 すると、必ず横スクロールバーが表示されます。 この横スクロールバーを消したい場合には、どのようにすれば良いでしょう。 ちなみにこのページになります。 http://ee.uuhp.com/~macyako/ ブログのbodyタグに以下を追加しましたが、無理でした。 body { overflow-x: hidden; } あと、インラインフレームの幅を広げてみたりしたのですが無理でした。 ソースが間違ったりしていますか？

  • ＡＳＰ．ＮＥＴでの縦・横スクロール

    ヘッダーだけ別テーブルで記述し、DataGridを入れるDIVと全体を入れるDIVの二つで縦横スクロールを行っていますが、縦スクロールバーが 横スクロールしないと表示されない現象が発生しています。 これを横スクロールしないで常に縦スクロールバーが表示される方法はないものですか？ 開発環境：VS2005

  • スクロールバーを横に表示させたい

    ＩＦＲＡＭＥ上でスクロールバーを縦ではなく横で表示させるにはどうしたらいいのでしょうか？

  • html、スクロールバーを表示させない（横だけ）

    HTMLでフレームのスクロールバーを表示させないには <frame>、<iframe>タグの属性、scrolling="no"とすればよいのですが それでは縦のスクロールバーも横のスクロールバーも消えてしまいます。 自分は横のスクロールバーのみ消して縦のスクロールバーのみ残したいのですがどうすればいいでしょう？ 補足：上下にのみ動かせるページを作りたい。ということ。 わかるかたどうかお願いいたします。 HTMLでムリでしたらJavaScritpなどでもかまいません（が、解説、もしくは解説ページを教えていただかないと自分はJavaScriptが打てませんので・・・よろしくお願い致します。）

  • 横スクロールバーが表示されてしまう

    ホームページを作成中なのですが、横幅の余白はあるのにのに横スクロールバーまで表示されてしまいます。 フレームを使用していて、そこにTABLEタグを入れるとどうやら必ず表示されるみたいです。html{overflow:hidden;}のタグを入れていますが、それでもだめみたいです。TABLEなしにすると横スクロールバーは表示されないのですが、デザイン上TABLEは使いたいのでカットは無理です。 解決方法が分かりません。どなたがアドバイスよろしくお願いします。HTML初心者なのでできれば分かりやすい説明をお願いします。 ちなみに使用しているブラウザはIE6です。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する