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

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

解決済

質問者：SighKey
質問日時：2013/12/04 10:52
回答数：1件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ixkaito
回答日時：2013/12/07 00:13

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

予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

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

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

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
返事が遅くなってしまい申し訳ありません。

100%とは差し引いた残り全てではないのですね。

とりあえず回答待ちの間に
JSでwindowサイズから計算して全体表示するようにしてみましたが、
100%指定と違いワンテンポ遅れるので妙に気持ち悪い感じです。

CSSのみで不可能であること理解しました。
頑張って可能な限り美しく仕上げたいと思います。

ありがとうございました！

通報する

お礼日時：2013/12/10 11:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！