- ベストアンサー
scrollTopについて
atom_seedの回答
このように動的に高さを取得して、設定させてみるとどうでしょう。 var e = document.getElementById("contents"); e.scrollTop = e.scrollHeight;
関連するQ&A
- 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で<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- CSSの設定方法について
CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- Layerの中にあるリンクがmacで動作しません
以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- ベストアンサー
- HTML
- 表（セル）の線
スクロール状態の時、一番下までいくとmargin:-1px;と指定したbottomのところが上手く消えてくれないのでなにか良い解決方法はないでしょうか。 伸ばしてるときは大丈夫なんですが・・・ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> table,td {border: solid 1px slategray; border-collapse: collapse;} .close {height:100px;overflow-y:auto; } div {padding:0px;} </style> <script> function scr(){hoge=document.getElementById("konoko"); if(hoge.className=="close"){hoge.className="";} else {hoge.className="close";} } </script> </head> <body> <a href="#" onclick="scr()">伸縮すいっち</a> <br><br> <table> <tr> <td>名前</td> <td style="width:14px;">S<br>C<br>R</td> </tr> <tr> <td colspan="2" style="padding:0;"> <div id="konoko" class="close"> <table style="margin:-1px"> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- レイアウトの崩れについて
先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。 どうすればdivの中にtableがおさまるでしょうか。 (XHTML) <div id="main"> <div class="contents"> <table> <tr> <td id="tdl" rowspan="4">>映像</td> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> </table> </div> </div> <div id="sub"> 内容 </div> (CSS) #main { width: 600px; float: left; } .contents { width: 600px; height: 155px; background-color: #f5f5dc; font-size: 16px; float: left; } table { width: 590px; height: 150px; border-collapse: collapse; table-layout: fixed; border: solid; border-color: #f1f1f1; } th { width: 100px; height: 32px; border-bottom: solid; border-bottom: thin dotted; background-color: #f1f1f1; font-size: 16px; text-align: left; } #tdl { width: 160px; height: 145px; border: none; } td { width: 320px; height: 32px; border-bottom: thin dotted; font-size: 16px; text-align: left; } #sub { width: 150px; height: 145px; background-color: #999; float: right; } 関係あるか分かりませんが、サイト全体の幅は770pxです。 書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- JavaScriptでアコーディオンメニューを作る
こちらでよくお世話になっています。 JavaScriptに詳しい方、どうか教えてください。 当方、まだまだJavaScriptは初心者です。 以下のようなHTMLがあって、 コンテンツ部分を普段は非表示で タイトル部分をクリックしたら、 その下の表示・非表示が切り替わるようにしたいと考えています。 （アコーディオンの感じです。） ------------------------- <div id="title1">タイトル1</div> <table id="contents1"> <tr><td>コンテンツ1</td></tr> </table> <div id="title2">タイトル2</div> <table id="contents2"> <tr><td>コンテンツ2</td></tr> </table> <div id="title3">タイトル3</div> <table id="contents3"> <tr><td>コンテンツ3</td></tr> </table> ちなみに、それぞれタイトルとコンテンツがセットになっていて、 titleのid名の末尾の番号と そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。 ※このタイトルとコンテンツは動的に増えたり減ったりします。 プラグインを入れないで 自分でjavascriptを組みたいと考えているのですが どのようにすればよいのか、分からず こちらで質問をさせていただきました。 var divList = document.getElementsByTagName('div'); for(i=0; i<divList.length; i++){ } のようにやっていくのだろうとは思うのですが for文の中をどのように書いたらよいかを ご教授いただけたら助かります。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
すばらしい！ 解決しました！ 迅速な回答ありがとうございました！