height プロパティ
height プロパティは、エレメントの高さを指定するプロパティです。値は絶対値で単位を必要としてます。
エレメントが block エレメントである必要があります。
height: 500px;
幅を指定するには width を指定します。width に合わせて自動設定するには、height:auto;にします。
height プロパティは高さが固定されますが、min-height プロパティや max-height プロパティで高さに自由度を持たせることができます。
height プロパティについて
height プロパティは以下の注意点があります。
デフォルトの設定では指定値に margin、border、padding の値は含まれません。そのため、margin、border、padding の指定値によってエレメント全体の大きさが変化することに注意が必要です。
もしも、エレメントの width や height 値内に padding や border を収めたい場合は、box-sizing プロパティを設定します。
親エレメントからはみ出して表示される場合は、はみ出しを調整するためにoverflowプロパティを使います。
構文(Syntax)
CSS
height: auto | length | % | initial | inherit ;
DOM ( JavaScript )
object.style.height
object.style.height=" auto | length | % | initial | inherit "
値（Values）
値には、計算式によって値を指定する calc() ファンクションも利用できます。
| Value | 摘要 |
|---|---|
| auto | 初期値（default値）。 |
| length | CSS長さの単位。絶対値を指定。 |
| % | default値を基準に割合で設定 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | No |
| 変化（Animatable） | Yes |
Example
height プロパティの例です。id="contents"エレメントにheight、widthプロパティを指定しています。
親エレメントには大きさの指定がないのでid="contents"エレメントに合わせて大きさが変わります。
関連するプロパティ
以下の関連するプロパティがあります。
| max-height | 最大高さ |
| min-height | 最小高さ |
| width | エレメントの幅 |
| max-width | 最大幅 |
| min-width | 最小幅 |
| resize | ユーザーがサイズを変更可能に |