ベストアンサー

ブラウザの伸縮に合わせて縦スクロールも伸縮

2011/07/12 16:54

googleカレンダーの様に、ブラウザの伸縮に合わせて縦スクロールも伸縮させたいのですが、（https://www.google.com/calendar/render）HTMLとCSSだけでは限界があるようです。どなたか良い方法ご存じな方いらっしゃいませんでしょうか？ご教授頂けると幸いです。

moguraxxx
お礼率100% (2/2)

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

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/12 22:10 回答No.2

＞これが overflow:auto; だけでは出来ないんですTT そんなことないです。ちょっと簡単に走り書きしてみました。・・とはいっても一応、 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) だけはチェックしたけど・・難しく考えないこと(^^) ★ポイントは、tableの高さがディスプレイの幅に合わせて変化しないと結果的にスクロールバーの長さも変わらないということです。・tableの行は適当に増やすこと・見やすくするためタブインデントを＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<p> ＿＿＿縦スクロールのテスト＿＿</p> ＿</div> ＿<div class="section"> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿<li><a href="./new/">新製品</a></li> ＿＿＿＿<li><a href="./product">製品</a></li> ＿＿＿＿<li><a href="./profile/">会社案内</a></li> ＿＿＿＿<li><a href="./contactUs/">コンタクト</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="priceList"> ＿＿＿<table summary="test"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="R1">列１</th><th abbr="R2">列２</th><th abbr="R3">列３</th><th abbr="R4">列４</th> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</div> ＿</div> </body> </html>

質問者

お礼 2011/07/13 21:21

ありがとうございます。 ORUKA1951に教えて頂いたソースを基に、もうちょっと試行錯誤してみます。

質問者

補足 2011/07/13 21:23

ORUKA1951さんに教えて頂いたソースを基に、もうちょっと試行錯誤してみます。すみません呼び捨てで。。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/12 20:24 回答No.1

普通に overflow:auto; だけ・・では？？

質問者

お礼 2011/07/12 20:44

ご回答ありがとうございます。これが overflow:auto; だけでは出来ないんですTT googleカレンダーでは、ブラウザの伸縮に合わせてスクロールも伸縮してます。そこが難しい所なのです。。

ブラウザの伸縮に合わせて縦スクロールも伸縮