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のスクロールバーのみでの表示を行いたいのですが、
何か指定が足りないのでしょうか？
