divのheight指定で画面一杯に表示したい

Question

よろしくお願い致します。

のを100%に指定して、タブレット等での表示時、縦でも横でも画面一杯に表示させたいと考えています。とりあえず css で以下は宣言済みです。　html, body { 　　height: 100%; 　　margin: 0px; 　　padding: 0px; 　} 親子構造としては以下を想定しています(いくらか簡略化しています) 　　　

　　　(1)ここにヘッダー的なもの　　

　　　(2)この部分を縦一杯にしたい　　

　 (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。その際、選択行の色付け等を行いたかった為、大枠を

でくくり、その中にで表組みしています。最終的な構造は以下のようになっているはずです。　

　　・・・　

行ごとの

や、その中のでも height: 100%; は指定しています。また、1行あたりの高さは

と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、予想ではヘッダー用のdivが指定の高さで表示され、次のdivが残りの高さ分一杯に表示。その中のデータは overflow:auto; でスクロールできる。と考えていたのですが、実際はjavascriptで埋め込んだdiv、及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。（divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、そのサイズに収まってスクロールできました。（縦一杯ではありませんがdivのoverflowは機能しました）何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、何か指定が足りないのでしょうか？

ixkaito · Accepted Answer

>html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

まずこの予想の部分が間違っています。質問の通りに作って、高さ500pxの画面で確認した場合、html、bodyの高さは500px、ヘッダー60px、そしてその次のdivの高さも500pxで、60pxはみ出る形になります。height:100%というのは親セレクタに対しての100%です、残りの100%ではありません。

残りの高さいっぱいにしたい場合はcssのみではできません。JSを使うか、似たような見え方で違う組み方をするか…

divのheight指定で画面一杯に表示したい

>html と body に height:100%; を指定しているので、

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング