min-height 속성

min-height 속성은 요소의 최소 높이를 설정합니다. 속성 값으로는 크기 단위나 값이 없음을 의미하는 키워드 none를 사용할 수 있습니다.

주로 너비가 유동적인 요소(높이가 백분율로 설정되었거나 전혀 설정되지 않고 요소가 내용에 따라 높이가 늘어나는 경우)에 지정합니다.

최소 높이가 설정되면 요소는 이 높이보다 작아질 수 없습니다. min-height에 필요한 것보다 텍스트가 적으면, 요소는 min-height의 높이를 가집니다.

반대로 텍스트가 더 많으면 요소의 높이는 텍스트 양에 따라 계산됩니다.

구문

선택자 {
	min-height: 값;
}

이 예시에서는 높이가 전혀 설정되지 않아 브라우저가 텍스트 양에 따라 자동으로 계산합니다. 그러나 min-height 속성이 설정되어 있으므로, 안에 텍스트가 전혀 없더라도 높이는 이 값보다 줄어들지 않습니다:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

요소에 더 많은 텍스트를 추가하여 블록 높이를 넘치게 해봅시다. 이 경우 우리의 블록은 단순히 높이를 늘릴 것입니다:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

비교를 위해 최소 높이를 제거하고 대신 height 속성을 설정하면 블록에 어떤 일이 일어나는지 살펴봅시다:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}