min-height 속성

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

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

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

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

구문

css선택자 {
  min-height: 값;
}

예시

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

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

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

Результат:

예시

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

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

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

Результат:

예시

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

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

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

Результат:

함께 보기