heightプロパティは要素の生成するボックスの内容領域の高さを指定します。適用対象は、非置換インライン要素と表の列・列グループ要素（col要素, colgroup要素）を除いたブロック要素とインラインブロック要素、インライン要素の中で横幅と高さの内在寸法がある置換要素です。
heightプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定（負の値は不正）%）による割合で指定（負の値は不正）auto"auto" を指定した場合、指定された要素によって解釈が異なります。ブロック要素に指定した場合、要素の生成するボックスの一番上の行から下の行までが高さとなり、もう一方の適用対象である置換要素に指定した場合、img要素は画像のもともとのサイズが高さとなり、その他の input要素, object要素, select要素, textarea要素は UA が決定する内在寸法が高さとなります。
パーセンテージ値が基準値として参照する包含ブロックとは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で、heightプロパティのパーセンテージ値は高さを基準値として参照します。
なお、高さのサイズを固定するのではなく、柔軟に変化できる高さにしたい場合は、高さの最小値・最大値を指定する、min-heightプロパティ・max-heightプロパティを使います。また、内容領域の高さを指定する heigthプロパティに対して、内容領域の横幅は widthプロパティで指定します。さらにボックスの内容領域をはみ出した場合の表示方法については overflowプロパティでコントロールすることができます。
heightプロパティが適用できない非置換インライン要素の高さは、line-heightプロパティによる行ボックスの高さがこれに相当します。
div { width : 300px ; height : 60px ; border : 1px solid gray ; }
div.ie_bug { border : solid orange ; border-width : 20px 1px ; }
ここに用意したサンプルは、Microsoft Internet Explorer に見られるボックスの計算方法のバグを顕著に示したものです。
Windows版InternetExplorer 5.5 以前、及び Windows版Internet Explorer 6・Macintosh版Internet Explorer 5 のバージョンでは、レンダリングモードが後方互換モードの場合に誤った計測が行われ、このサンプルのボックスはどちらも同じ高さで表示されます。というのは、Windows版InternetExplorer 5.5 以前、及び Windows版Internet Explorer 6・Macintosh版Internet Explorer 5 の後方互換モードでは、ボーダー領域（内容領域+パディング+ボーダー）までを含んだ寸法をボックスの高さとして計測してしまうためです。標準準拠モードであれば、通常通り、heightプロパティは内容領域の高さのみを反映します。Windows版Internet Explorer 7 では、このバグは改善済みです。
レンダリングモードの切り替わりについては、!DOCTYPE スイッチを参照ください。
http://w3g.jp/css/box/height実績：大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー