CSS

The height property is used to specify the height of an element. This property takes values in units such as pixels (px), percent (%), and veiwport height (vh).

height

　heightプロパティは、要素の高さを指定するために使用されます。このプロパティは、ピクセル（px）、パーセント（%）、veiwport height（vh）、などの単位で値を取ります。

　例えば、次のように書くことができます。

div {
	height: 100px;
}

　この例では、div要素の高さが１００ピクセルに設定されます。

　heightプロパティは、要素の内容の高さにも影響を与えます。要素の内容が高さよりも大きい場合、要素の高さは内容に合わせて自動的に調整されます。しかし、この自動調整は、親要素の高さに制限されるため、要素が親要素よりも高くなることはありません。

<div class="parent">
	<div class="child">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at blandit elit. Donec vitas risus elit. Suspendisse potenti. Fusce eget tempor mauris. Sed gravida velit a eros dignissim efficitur. Vivamus iaculis, dolor eu sagittis feugiat, arcu metus feugiat orci, vel bibendum dolor lacus a arcu. Donec quis euismod augue, eget eleifend nisl. Nunc rutrum, nulla sit amet suscipit posuere, augue nibh pellentesque massa, vel bibendum nisi nunc quis lorem.
	</div>
</div>

.parent {
	margin: 1em;
	height: 200px;
	border: 5px solid darkblue;
}

.child {
	height: 250px;
	background-color: lightblue;
}

　この例では、parentクラスが親要素で、childクラスが子要素です。parentクラスには、heightプロパティが２００ピクセルで設定されています。childクラスには、heightプロパティが２５０ピクセルで設定されています。

　このコードを実行すると、childクラスの背景色が lightblueに設定されているので、この要素が親要素の外側にはみ出していることがわかります。しかし、parentクラスの高さが２００ピクセルに制限されているため、childクラスは親要素の高さに合わせて自動的に調整され、親要素からはみ出すことはありません。

　また、heightプロパティは、displayプロパティが block、inline-block、table-cellの要素に対してのみ有効です。displayプロパティが inline、table-row、table-columnなどの値の場合は、heightプロパティは無視されます。

　最後に、heightプロパティは、要素の高さを固定するために使用されるため、動的な高さを持つ要素には適していません。動的な高さを持つ要素には、min-heightプロパティや max-heightプロパティを使用することをお勧めします。