widthとheight | CSS電光石火

• width（ウィドス）

•  

widthは要素の横幅を決定します。前項で触れた、全体で200pxの大きさを持つboxの内側の部分、即ち160px部分の領域を表しています。メニューバーなどのパーツはこのwidthで決め打ちしてしまうことが多いので、前項と同じく必須のCSSプロパティ（※CSS指定の事です）といえるでしょう。

• height（ハイト）

•  

heightは縦幅を決定します。このheightもwidthと同じく、marginやpaddingの値の内側にある領域となります。単純に中身の高さ、と覚えてしまえばイメージしやすいでしょう。
ただし、このheightプロパティはやや使い勝手が特殊で、%記法の場合、テーブルレイアウトなどと同一の挙動を示してくれません。即ち、画面いっぱいに縦幅を伸張してくれない（※body要素の内側へとぴったり吸着してくれない）のです。詳しく知りたい方はコラム欄をご覧ください。

heightプロパティにより、要素の高さを100%にするには、スタイル側でbody,html{heght:100%;}とし、さらにその下位にある（ネスト下にある）要素にもhight:100%;を逐次指定しなくてはなりません。つまり、ネスト（堀）が深くなればなるほど、このheight:100%;の指定は増えてゆく事になります。まとめて指定すれば良い、という話ではあるものの、正直なところCSSを使って、無理してまで行う手法とも思えません。テーブルを使いたい場合、全体に使用するのは非推奨とはいえ、使ってしまった方が早いでしょう。
また、どうしてもテーブルを避けたい場合、IE6/7の見栄えを犠牲にし、CSS3で策定されたdisplay:table;とdispaly:table-cellプロパティを使って実装する手段もあります。display-tableで下位要素を囲み（ラッピング）、その下にtable-celllを配置するという手法です。この手法はIEでは、IE8以降しか対応しませんので、注意が必要です。