• 締切済み

クロームとサファリでスクロールバーが表示されない

Macのグーグルクロームとサファリでスクロールバーを表示させる方法を教えて下さい。 ちなみにWindowsでは表示されていると思うのですが・・・ 下記のように、縦幅を指定し、その中で入り切らない文章を下にスクロールさせるようなページを作成したのですが、ブラウザによりスクロールバーが見えないとなると、人によっては下にまだ内容がある事に気づかないという事が起こってしまうのではと心配です。 #content { text-align: left; padding: 0px; width: 340px; height: 500px; float: left; margin: 0px; overflow-y: auto; overflow-x: hidden; } 何かやり方があれば是非教えて下さい。 宜しくお願いします。

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • mililin
  • ベストアンサー率0% (0/0)
回答No.1

未検証ですが・・・ #content { text-align: left; padding: 0px; width: 340px; height: 500px; float: left; margin: 0px; overflow: auto; } で、うまく表示されないでしょうか? overflow-x、overflow-yは、IE独自仕様だったような。 今はもう全ブラウザ対応してるのかもしれないですが。 上記のCSSで試して、IEで見たときに横スクロールまで表示されてしまうのであれば、 overflow-x: hidden; を追加すればいいかも?

関連するQ&A

  • スクロールバーによって表示がズレます。

    下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。(IEはOKなのですが・・・) どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }

    • ベストアンサー
    • HTML
  • IEだとディスプレーによって表示が違います

    理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか? Firefoxだと大丈夫なのですが!IEは無理なのでしょうか? IEで観ると17インチディスプレーの場合、上手く左に100pxの余白、続いてcontainerの770pxが表示されるのですが、15インチディスプレーだと左に110pxの余白、containerの770pxがセンターリングされてしまいます。 見た目では110pxの余白+150pxの余白+770pxといった感じです。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto; padding: 0; } #blog { width: 540px; padding: 0; float: right; overflow: hidden; } #links { width: 190px; float: left; margin: 0 0 10px 0; padding: 0; font-family: verdana; font-size: 12px; text-align: left; }

  • FC2ショッピングカート 写真の大きさを変える方法

    FC2のショッピングカートでネットショップをしているのですが、表示される画像が小さいので大きくしたいのですが、どこをいじっていいのかわからなくて、困っています。 商品説明のページの写真(画面上で表示されている写真幅約2×3cm)を少し大きくしたいのですが。。。 使用しているテンプレートは custam です。 下のどこかをいじればよいのかな?とおもっておりますが、いかがでしょうか? 大変申し訳ありませんが、素人ですのでわかりやすく教えていただけると、とっても嬉しいです。 いろいろ検索して調べましたが、わからなくて困っています(涙) どなたか、わかる方教えて頂けると助かります。 /*--盾妬亥風--*/ .sort{ width:460px; margin-top:10px; text-align:left; padding-left:20px; } .sort a{ margin:0px 10px; } .pagelinks{ width:460px; padding-left:20px; } .pagelinks .a{ width:460px; text-align:left; } .pagelinks .b{ width:460px; margin-top:3px; } .pagelinks .b .ahead{ width:20%; float:left; } .pagelinks .b .pageno{ width:60%; float:left; } .pagelinks .b .next{ width:20%; float:right; } .item_list{ float:left; width:33%; padding-left:0px; } .item{ width:150px; text-align:center; overflow:hidden; padding-left:20px; } .item a img{ border:solid #dcdcdc 1px; } .item .name{ text-align:left; margin:3px; } .item .comment{ text-align:left; margin:3px; } .item .other{ margin:3px; text-align:right; } /*--盾妬傷亨ヘ-*/ .item_detail{ text-align: center; font-size: 12px; width: 480px; } .item_detail .thumb{ float:left; margin-top:10px; width:33%; } .item_detail .thumb img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .item_detail .thumb a img { background-color:none; display:block; } .item_detail .img-comment{ padding:3px; } .item_detail .comment{ padding:3px; text-align:left; } .item_detail .about{ text-align:right; } .item_detail .about .other{ padding:3px; } /*--チェック--*/ #subtitle{ margin:15px auto 5px; } .check{ margin:0; padding:0 0 30px; width:452px; } .pickupbase { font-size:10px; font-family:Osaka, Verdana, "MS Pゴシック"; margin-right:15px; padding-bottom:15px; width:130px; float:left; overflow:hidden; } .pickupbase a img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .pickupname { font-weight:bold; text-align:center; padding-bottom:3px; overflow:hidden; } .pickupprice { text-align:center; padding-top:5px; overflow:hidden; }

    • 締切済み
    • CSS
  • IEでテンプレートの表示が変です

    理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか? Firefoxだと大丈夫なのですが!IEだと表示が異なります。 IEで観ると左に110pxの余白、containerの770pxがセンターリングされてしまいます。見た目では110pxの余白+150pxの余白+770pxといった感じです。 ディスプレーのサイズによっても違うようです。15インチ、17インチともにIEでは思い通り表示されませんが、19インチだと表示されます。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto;(削除すると19インチもセンターリングされてしまいました) padding: 0; } #blog { width: 540px; padding: 0; float: right; overflow: hidden; } #links { width: 190px; float: left; margin: 0 0 10px 0; padding: 0; font-family: verdana; font-size: 12px; text-align: left; }

  • フロートしたボックスのスクロールバー

    メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに (メインのボックス↓) .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述) } こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。

  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!

    • ベストアンサー
    • HTML
  • css: IEでsidebarが表示されない

    cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar(背景、画像、テキストを含むすべて)がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative;     background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px;    ist-style: none;         width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}

    • ベストアンサー
    • CSS
  • ホームページを作っています、ページ内にiframeで他のページを表示さ

    ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が できるのですが、Firefoxだとスクロールバーが出ません・・・ どなたか表示させる方法をご存知でしたら教えてください。 以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }

    • ベストアンサー
    • HTML
  • ブラウザのスクロールバーの長さを制御

    ブラウザのスクロールバーの制御をしたいのですが、 いい方法が見つかりません。 たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。 この時、例えばブラウザウィンドウの縦幅を480pxにした場合は 差分の20px分のみのスクロールバーが出てきてほしいのですが、 単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、 800px分のスクロールバーが出てしまうのです。 ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。 何かいい方法があればご教授ください

    • 締切済み
    • CSS
  • padding-leftがききません。。。

    padding-left効かないです...原因教えて下さい。 ソースは以下です。 <div id="right"> <div class="plofile"> </div> </div> #right { width:250px; float:left; overflow:hidden; } .plofile { width:190px; height:265px; padding-left:10px; float:left; margin-top:35px; background:url(plofile_bg.png); padding-left:20px; }

専門家に質問してみよう