• 締切済み

DIVでスクロールバーを作ったのですが…

DIVでスクロールバーを作ったのですが… ページが表示された時にスクロールバーの見えない部分（最下位）を表示させるにはどぅしたら良いのでしょうか？？ 例：最下位のcccの部分 div.txt { border: solid 1px #808080; /*1pxには線の太さ、その後は色*/ width: 330px; /*横幅*/ height: 135px; /*高さ*/ padding: 0.5em; /*空白の大きさ*/ overflow: auto; /*スクロールバーの出方*/ } <div class="txt"> <p>111</p><br> <p>222</p><br> <p>333</p><br> <p>444</p><br> <p>555</p><br> <p>666</p><br> <p>777</p><br> <p>888</p><br> <p>999</p><br> <p>000</p><br> <p>aaa</p><br> <p>bbb</p><br> <p>ccc</p><br> </div> これは、可能ですか？ よろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

  • golive001
  • ベストアンサー率54% (20/37)
回答No.2

なぜdivで？が分かるとありがたいんですが。 訳ありですか？ textareaではだめなんでしょうか？

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

overflowプロパティのscrollという値は、はみ出した部分をスクロールさせることで省略表示を行うものです。 はみ出した部分を同処理するかと言う設定であり、スクロールバーの位置を設定するものではありませんので少なくともCSSでは無理です。 ラベルをつけて飛ばすと言う方法ならありますが、ページ全体をスクロールさせる結果にもなってしまいます。 JavaScriptはどうか分からないけど…、ボックス内のスクロールは環境によって挙動が変わるかもしれません。

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

関連するQ&A

  • 高さを指定せずに子divにスクロールバー

    お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

    • 締切済み
    • CSS
  • divのoverflowのスクロールバーを自動スクロールしたい

    初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか？参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。

  • divで作成したテキストボックス内の横スクロールバーとバックカラー

    お世話になります。 以下のhtml記述で、 (1)横スクロールバーを消したい（縦はそのまま生かしたい） (2)テキスト内(div内)のバックカラーを変更したい (3)スクロールバーの色を変更したい（無理？） のやり方を教えて頂きたく、どなたかご存知の方、 どうぞよろしくお願いします。 <html> <body> <div style="width: 12em; height: 4em; overflow: scroll;"> <p> <a href="***.htm">TEST 01</a><br> <a href="***.htm">TEST 02</a><br> <a href="***.htm">TEST 03</a><br> </p> </div> </body> </html> 以上

    • ベストアンサー
    • HTML
  • DIV要素の高さ100%で、スクロールバーを表示させたいです

    ソースは以下のとおりです。 DIV要素をheight:100%にして画面全体に広げるために、色々CSSで設定していましたところ、Firefoxでしたら縦スクロールバーが表示されるのですが、IE6では縦スクロールバーが表示されません。（左カラムの文字はかなり下まで続いています） IEでもスクロールバーが表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; background-color:#FF0000; padding-bottom: 32768px; margin-bottom: -32768px; } /*右カラムの設定*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; background-color:#00FF00; padding-bottom: 32768px; margin-bottom: -32768px; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </div> <div id="right"> aaaa </div> </div> </body> </html>

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • HTML&CSS DIVをぴったりと縦に並べたい

    HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }

    • ベストアンサー
    • HTML
  • <div style="overflow">でこんなことは出来ませんか？

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • スクロールバーのデザインを変えたい

    CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか？ スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。

    • ベストアンサー
    • HTML
  • クロームとサファリでスクロールバーが表示されない

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

    • 締切済み
    • 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する