• ベストアンサー

横方向のスクロールをなくしたい

縦3分割(cols="*,700,*")のフレームにし、真ん中だけ遷移させるページを作成しているのですが、CSSで、 body{ overflow-x:hidden; } と設定しているのですが、横方向にスクロールされてしまいます。フレームの値(width)より真ん中のページに置く幅の値が等しいか同値であるのですが、何か設定が要るのでしょうか? 因みに縦はスクロールします。(真ん中のフレームのみ) 考えてみましたが、結論が出そうになかったので教えてください。お願いします。

  • HTML
  • 回答数3
  • ありがとう数0

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

  • ベストアンサー
noname#191236
noname#191236
回答No.1

こんばんわ。 仮にこうフレーム設定したとすると。 <html> <head> <title>frameサンプル</title> </head> <frameset cols="*,700,*"> <frame src="sample1.html"> <frame src="sample2.html"> <frame src="sample3.html"> </frameset> </html> こんな感じで、真中のフレームページを<div>で囲ってみては如何でしょうか? ■sample2.html <div style="width:660;overflow:hidden;"> <img src="test.jpg" width="800"> </div> 他に方法があるのかは分りません。 それでは。

その他の回答 (2)

  • go6n
  • ベストアンサー率21% (3/14)
回答No.3

私も補足説明です。ご参考までにどうぞ。 bodyに対してoverflow-xを設定すると、 「横スクロールバーは表示されないけれど、横方向にスクロールできる」ようになります。 (これを逆に利用して、見えない部分に隠し要素を置いたりする方も見かけます。) スクロールさせたくないという時は、GX71さんの方法で上手くいくはずです。 もし、それでも上手くいかないなら、IE以外のブラウザを使っていませんか? overflow-x、overflow-yはIEのみに対応しています。 NN等では上手く動作しないと思います。(overflowはNNも対応しています。) また、閲覧者様がIE以外のブラウザということもあると思います。 widthやheightを設定していればスクロールバーは消えるので、私はブロックで区切ることをお勧めします。 素敵なページが作れますように!

noname#12124
noname#12124
回答No.2

一応、知っている限り。 body{ overflow-x:hidden; } (overflow-xのxの部分はいらないのでは?) overflowプロパティは、ブロックレベル要素(と置き換え要素)に指定できるものです。 bodyはおそらく、ブロックレベル要素ではないのではないかと。 解決策としては、GX71さんが答えておられるように、body以下をdiv要素などで囲ってしまい、そこをoverflow:hiddenと指定するなどでしょうか。 駄文、失礼致しました。

関連するQ&A

  • iframeの横スクロール

    iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで; 詳しい方教えていただけないでしょうか。 (説明がへたくそですみませんm(_ _)m)

  • スクロールバーを無くしてすくロースさせたい!

    タイトルのままなのですが、現在ページを作っているのですがデザインの関係からスクロールバーを表示させない仕様になりました。 CSSは、 overflow:hidden; の設定を試してみました。 しかし、この状態では当然はみ出したページ部分を読むことが出来ず困っております。 イメージとしては、overflow:hidden;の様にスクロールバーが無くなった状態でそのままスクロールできればと考えております。 フレーム方式にしたら出来るような記憶がありますが、何れにしてもフレームは使用したく無いです…。 どなたか、実現する方法をご存知の方いらっしゃいましたら、アドバイスを頂けますと助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 横スクロールバーについて

    Dreamweavwe8にて作業しています。 製作した画面はフレーム構造のメインコンテンツを表示する部分なのですが、フルCSSにて製作、確認画面でその画面だけを表示すると縦スクロールだけが表示され、横スクロールは通常時は表示しませんが、 INDEXを立ち上げ、フレームの一部としてみた時、横スクロールが表示されます。 それは、縦スクロールが消えるサイズまで広げると消えるのですが、縦スクロールがある間は表示されます。 ページの設定でスクロールは自動にしてあります。 フレームの設定は、 <frameset cols="166,*" frameborder="NO" border="0" framespacing="0"> <frame name="leftFrame" noresize scrolling="NO" src="menu.html"> <frameset rows="135,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame name="topFrame" noresize scrolling="NO" src="header.html" > <frame name="mainFrame" src="top.html"> </frameset> </frameset> としてあります。 ここで何か設定が必要なのでしょうか? 私が困っているのはtop.htmlのところです。 解りにくくてすいませんが、よろしくお願いします。

  • 横スクロールバーが消えません

    webにフレームやFlashを導入してリニューアルさせてたのですが、横スクロールがいくつかのページで出てきてしまい困っております。 テーブル幅はどのページも600ピクセル以下に設定しています。mac os XのIE 5.2だと横スクロールバーは1つも出ないのですが、win XPのIE 6.0だと何故か何個か横スクロールが出てきてしまいます。 どこかのサイトで横スクロールバーを消す方法で <style type="text/css"> <!-- body { overflow-x: hidden; } --> </style> これで消えるとあったんで試してはみたのですが、なにせhtmlの知識が乏しいので、使い方も悪いのか、まだ消えません。 どうやったらこの横スクロールバーを消せるのでしょうか? どなたか分かる方いらっしゃったら教えてください。

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

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • IE6.0でフレームぺージの横スクロールバーが消せません。

    1・フレーム指定ページ 2・左表示ページ 3・右表示ページ といった、左右を分割したページを作っているのですが、 画面を横にしなければいけない表示物が何もないにもかかわらず、 IE6.0特有のバグだそうで(?) 右側に横スクロールバーが出てきてしまい、とても気になります。 調べてみて、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>‥ と個々や全部のページに入れたり、 <STYLE TYPE="text/css"> HTML { overflow-y: scroll; } </STYLE> の記載を<head></head>間に、 これもやはり個々のページに順番にいれてみたり、 全部に入れてみたりしたのですが、 どうにも要領が悪いようで全然消す事が出来ませんでした。 BODY { overflow-x: hidden; } は文字の表示サイズを最大にして見た場合、はみ出してしまう部分がある時、 見辛かったのでなるべく使わない方がいいかと思い使用を保留にしています。 タグをいれるページや、書き方や書く場所が間違っているのでしょうか? それともこのやり方自体が間違っているのでしょうか? 何とか横スクロールを穏便に消す方法はありませんでしょうか…、 どうかご存知の方お教え下さい、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スクロールバーの非表示

    PC上で操作するシステム画面をhtml+cssで作成しました。 そのhtmlファイルを、アクティブデスクトップに設定して使用する、というものなのですが、画面に出てしまうスクロールバーを非表示にしたいのですが、JavaScriptや、cssで、scroll=hiddenや、overflow:hiddenなど設定をしても非表示にすることができません。(ブラウザでも非表示にできませんでした。) 非表示の設定に関係するかどうかわかりませんが、 html内では、 メッセージをスクロールさせるために、 <body onLoad="scroll()"> の記述と、 タブ操作をするために、フリースクリプトのtabMakerを使わせていただいています。 不十分かもしれませんが、上記の内容で解決の方法はありますでしょうか。よろしくおねがいいたします。

  • IE7の<div>のバグ

    IE7でgooglemapの表示がおかしくなります。 <div id=~>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id~>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。

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

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

  • overflow:hiddenでスクロールバー

    <div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。

    • ベストアンサー
    • CSS

専門家に質問してみよう