- ベストアンサー
ASPにて、DIVタグを使って一覧に縦スクロールバーをつけた画面を作成
chochobizoの回答
ASPというよりも、HTML+CSSの問題と思います。 HTML+CSSのソースコードの提示や ブラウザ環境（IE,Firefox）とバージョンなども 提示した方が、意見も出やすいと思います。
関連する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タグを作成するには
縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。 下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);
- 締切済み
- JavaScript
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- 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
- 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
- <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
- ＡＳＰ．ＮＥＴでの縦・横スクロール
ヘッダーだけ別テーブルで記述し、DataGridを入れるDIVと全体を入れるDIVの二つで縦横スクロールを行っていますが、縦スクロールバーが 横スクロールしないと表示されない現象が発生しています。 これを横スクロールしないで常に縦スクロールバーが表示される方法はないものですか？ 開発環境：VS2005
- ベストアンサー
- Microsoft ASP
- 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>
- 締切済み
- HTML
- 余分な縦スクロールバーが出てしまう
CSSを外部ファイル、本文はXHTML1.0でページを作っています。 #headerと#containerで上下に分かれるデザインです。 #headerはwidth: 100%;で横いっぱいに伸びており、#containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。 #headerは上手くいっており問題はないのですが、#containerがどうしてもうまく行きません。 height: 100%;で背景画像は下まで伸びるのですが、本文がどんなに短くても、200px位？縦スクロールバーが必ず出てしまうのです。 本文が長くても、確実にブラウザに収まる程短くても結果は同じです。 （1920*1200のディスプレイで全画面表示しても同じ結果なので、余白が反映されている訳ではないと思います） 余分な縦スクロールバーが出てしまう原因には何がありますか？ 確認ブラウザはSafari/3.2.1 Firefox/3.0.7です。 原因がお分かりになる方、ご教授お願い致します。
- ベストアンサー
- CSS
お礼
回答ありがとうございました。 時間はかかりましたが、別の方法で解決しました。