divで高さをウィンドウサイズに合わせられるか

[新着] Webテンプレートを仮オープンしました

0   名前： はざま ： 2006/05/28（日） 05:26
ログ検索やググってみたのですが、思うような回答は見つからず、質問させて頂く事にしました。

tableですと「height:100%;」にした時に、ウィンドウの高さを調節すると、tableの高さも合わせて拡大縮小されますが、divでやるとこうなりません。
divでそうする事は出来るのでしょうか。

それともこれはブラウザによって見え方が違うだけで、「tableだから」だとかいう問題ではないのでしょうか。
1   名前： Pid ◆byEkK9OALr ： 2006/05/28（日） 05:26
> tableですと「height:100%;」にした時に、ウィンドウの高さを調節すると、tableの高さも合わせて拡大縮小されますが

そもそも CSS 仕様に照らせば，たとえ table 要素でもその動作は間違いです。そうなるのは過去互換モード時のみで，今後の保証はありません。


＊ ＊ ＊

パーセント単位は「何に対して 100% なのか」を常に念頭に置く必要があります。空の HTML 文書に対して

html { border: 5px solid red; }
body { border: 5px solid blue; }

とでも指定してみれば，キャンバスの初期配置が実感できるでしょう。


＊ ＊ ＊

最も外側のコンテナを初期包含ブロックと呼びますが，HTML 文書では html 要素がそれに当たります（ただし，IE の過去互換モード時は body 要素）。

/* 初期包含ブロック（html 要素）を表示域の高さに合わせる */
html { height: 100%; }

/* body 要素の高さをを初期包含ブロックと同じにする */
body { height: 100%; }

/* body 要素の直下にある div 要素の高さを body 要素と同じにする */
body > div { height: 100%; }


と段階的に指定していくことになります。ただし当然ながら，単純に高さが同じでは親ボックスをはみ出してしまいますので，工夫して下さい。
2   名前： はざま ： 2006/05/28（日） 05:26
お早い回答を有難う御座います！
解りやすい文章で、大変丁寧に答えてくださり、此処で質問して本当に良かったと思いました。

なるほど、やはり「tableだからその様に動作する」等という問題ではないのですね。
そして「何に対して 100% なのか」、これを理解する事が第一なのですね。

その通りに指定してみても解決は出来ませんでしたが、もう少し、色々と弄ってみようと思います。
恐らく何かの設定がおかしいのでしょうし・・・。

今回は本当に有難う御座いました。
一覧へ戻る