- 締切済み
「overflow: hidden」ペー ジ内リンクで画面がずれてしまう
<body>に「overflow: hidden」を指定してスクロールバーを非表示にし、 領域<div class="scroll">内のみスクロールさせる「擬似フレーム」的（？）なものをつくりました。 そして、<div class="scroll">の中をクリックで移動するためのアンカーリンクを設けました。 ブラウザのウィンドウサイズが十分に大きい場合は問題ないのですが、 ウィンドウサイズが小さい（本来なら縦スクロールが必要になるサイズ）場合、 リンククリックで画面内が上にピッとずれてしまいます。 <body>に「position: fixed」を指定すればFirefox等では解決しますが、IEではダメです。 このズレを防ぐ方法はないものでしょうか。 以下サンプルソースです。 <html> <head> <style type="text/css"> <!-- body { overflow: hidden; /*---↓Firefox等でOK、IEはダメ------- position: fixed; top: 0px; -----------------------------------*/ } .scroll { overflow: auto; height: 200px; background: #CCCCCC; padding: 10px; } --> </style> </head> <body> <h1>ページ内リンクによる「scroll」と「overflow: hidden」 </h1> <ul> <li><a href="#topic1">その1＞＞ </a></li> <li><a href="#topic2">その2＞＞ </a></li> <li><a href="#topic3">その3＞＞ </a></li> </ul> <div class="scroll"> <div id="topic1"> <h2>その1</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic2"> <h2>その2</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic3"> <h2>その3</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </body> </html>
- ijava
- お礼率78% (26/33)
- HTML
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
そもそも何故縦スクロールバーを無効にしたいのかがわからない。 ページの見栄えにこだわって利便性を損なうのはいかがなものかと…。
関連するQ&A
- ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ margin: 0px; padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- HTML
- overflow:hiddenでスクロールバー
<div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。
- ベストアンサー
- CSS
- CSSで擬似的にフレームを作りたい
CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？
- ベストアンサー
- HTML
- swfをoverflow: hiddenできない
HTMLカテゴリに登録しましたが、CSSの質問です。 divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。 ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ（範囲）を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。 画像でも同様だったのですが、何故かFlash（swfデータ）はIE以外のブラウザ（NN、Firefox、Operaなど）で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか？ ソースは以下になります。 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/xhtml1-transitional/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- #clip { border: 1px solid blue; width: 500px; height: 100px; overflow: hidden; } //--> </style> <title></title> </head> <body> <div id="clip"> <embed src="flash.swf" width="500" height="250" /> </div> </body> </html> お分かりのように、本来はheight=250pxのswfをheight=100px分だけ表示したいのです。
- ベストアンサー
- HTML
- floatしたdivの高さを画面いっぱいにした際の質問です。
下記のTIPSを利用してfloatさせたdivを画面いっぱいの高さに表示したいのですが、 FireFoxだとうまく表示されますが、IEだとものすごく縦長のページとして認識されてしまいます。 (div#catsideが長く表示されてしまうようです） IEでもうまく表示させるにはどうすればいいでしょうか。 もしこのTIPSではなく別のTIPSで同じ表示が可能でしたらそちらを教えていただければ幸いです。 よろしくお願いいたします。 ※デザイン上添付の画像のようにレイヤー化する必要があるため、z-indexは必須です。ここが邪魔しているのかなとも思うのですが・・・ ＜HTML＞ <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> ＜CSS＞ div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul , div#catsidemenu ul li{ 略 } div#catSidePhotoBg{ background:url(images/sidebarbg.png) repeat-y; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }
- 締切済み
- HTML
- CSSで「overflow:scroll」をしてい
CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。
- ベストアンサー
- CSS
- overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- ベストアンサー
- CSS
- リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでa要素全体をリンク出来るようにしたいのですが
CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。
- ベストアンサー
- HTML
- overflow:scrollのスクロールバーのデザイン
overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。
- 締切済み
- HTML
補足
ご意見ありがとうございます。 なぜこうした構造のものを作りたいかは、 質問の内容と無関係と思われますので控えさせていただきます。 申し訳ありません。