min-height 속성의 이해

min-height 속성은 요소의 최소 높이, 즉 최소한의 세로 크기를 지정합니다.

요소의 콘텐츠나 스타일에 의해 높이가 작아지더라도, 최소 높이인 min-height 값 미만으로는 줄어들지 않도록 제한할 수 있습니다.

이 크기의 기준은 기본적으로 콘텐츠 영역의 높이입니다.
그러나, 요소의 크기를 계산할 때 크기의 기준을 설정하는 box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 높이가 기준이 됩니다.

형식 구문

CSS 
selector {
    min-height:  <길이> | <백분율(%)> | <키워드>
}

예제

다음의 예제들은 min-height 속성이 요소의 최소 높이를 설정하는 방식을 잘 보여줍니다.

요소의 높이가 지정되지 않은 경우

이 예제에서는 두 개의 <div> 요소가 사용됩니다.
첫 번째는 min-height가 지정되지 않은 Div-A이고,
두 번째는 비교를 위해 min-height가 200px로 지정된 Div-B입니다.

HTML 
<div class="div-a">Div-A</div>
<hr>
<div class="div-b">Div-B</div>
CSS 
.div-a {
    /* min-height가 지정되지 않음 */
    /* 콘텐츠에 맞춰 높이가 결정 */
    background-color: silver;
}
.div-b {
    min-height: 200px; /* 200px이 적용됨 */
    background-color: gold;
}
실제 적용된 모습
설명
  • 첫 번째 Div-A는 min-height가 지정되지 않았기 때문에 콘텐츠에 맞춰 높이가 결정됩니다.
  • 반면, 두 번째 Div-B는 min-height가 200px로 지정되어 있기 때문에, 콘텐츠의 높이가 그보다 작더라도 최소 높이인 200px를 유지하게 됩니다.

이처럼 min-height는 요소의 최소 높이를 설정하여 콘텐츠나 스타일에 의해 높이가 최소 높이보다 줄어드는 것을 방지합니다.

요소의 높이가 지정되었을 경우

이 예제에서는 세 개의 <div> 요소가 사용됩니다.
첫 번째는 height: 100px로 지정된 Div-A이고,
두 번째는 height: 400px로 지정된 Div-B입니다.
두 요소 모두 min-height가 200px로 지정되어 있습니다.
세 번째는 비교를 위해 height: 100px이 지정되었지만, min-height가 지정되지 않은 Div-C입니다.

부연설명
height 속성은 요소의 높이, 즉 세로 크기를 지정합니다.

HTML 
<div class="div-a">Div-A</div>
<hr>
<div class="div-b">Div-B</div>
<hr>
<div class="div-c">Div-C</div>
CSS 
.div-a {
    height: 100px;
    min-height: 200px; /* 200px이 적용됨 */
    background-color: silver;
}
.div-b {
    height: 400px; /* 400px이 적용됨 */
    min-height: 200px;
    background-color: gold;
}
.div-c {
    height: 100px; /* 100px이 적용됨 */
    background-color: orangered;
}
실제 적용된 모습
설명
  • 첫 번째 Div-A는 height: 100px이 지정되었지만, min-height: 200px보다 작기 때문에 min-height로 지정한 최소 높이인 200px을 가집니다.
  • 두 번째 Div-B는 height: 400px이 지정되어 있으며, 최소 높이인 min-height: 200px보다 크므로 height 값인 400px이 그대로 적용됩니다.
  • 세 번째 Div-C는 min-height가 지정되지 않았기 때문에 height로 지정한 100px이 적용됩니다.

이 예제는 min-height와 height 속성이 어떻게 작용하는지를 잘 보여줍니다.

height와 max-height와의 관계

구문

CSS 
/* <길이> 단위 값 */
min-height: 120px;
min-height: 13rem;
min-height: 15rem;

/* <백분율(%)> 단위 값 */
min-height: 50%; /* 컨테이닝 블록 높이의 50% */
min-height: 100%; /* 컨테이닝 블록소 높이의 100% */

/* <키워드> 값 */
min-height: auto; /* 초깃값 */
min-height: max-content;
min-height: min-content;
min-height: fit-content;

/* 전역 값 */
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
min-height: unset;

값

min-height 속성은 다양한 형태의 값을 사용할 수 있습니다.
이를 설명과 예제로 정리하면 다음과 같습니다.

auto

초깃값입니다.
요소의 최소 높이를 콘텐츠와 컨텍스트에 따라 브라우저가 자동으로 결정합니다.

<길이> 단위 값

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위
예제
HTML 
<p>min-height</p>
<p>min-height 속성은 요소의 최소 높이, 즉 최소한의 세로 크기를 지정합니다.</p>
CSS 
p {
    min-height: 100px;
    width: 50px;
    background-color: gold;
}

코드 부연설명
width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

실제 적용된 모습

<백분율(%)> 단위 값

컨테이닝 블록(containing block)의 높이에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제
HTML 
<div class="parent">
    <div class="child">부모 요소(컨테이닝 블록)의 높이에 대한 백분율로 정의합니다.</div>
</div>
CSS 
.parent {
    height: 100px;
    background-color: silver;
}
.child {
    min-height: 50%;
    background-color: gold;
}
실제 적용된 모습

max-content

min-height 속성에서 max-content 값은 값은 콘텐츠의 최대 높이에 맞춰 요소의 최소 높이를 설정합니다.
즉, 요소의 최소 높이는 콘텐츠가 온전히 차지할 수 있는 시점의 최대 높이로 설정됩니다.

max-content는 그 콘텐츠가 차지하는 최적의 충분한 높이만큼만 요소의 크기를 맞추는 역할을 합니다.

min-content

min-height 속성에서 min-content 값은 값은 콘텐츠의 최소 높이에 맞춰 요소의 최소 높이를 설정합니다.
즉, 요소의 최소 높이는 콘텐츠가 온전히 차지할 수 있는 시점의 최소 높이로 설정됩니다. 이때, 콘텐츠가 잘리거나 흐름을 깨뜨리지 않으면서 가능한 한 작은 높이를 유지합니다.

min-height 속성에서 min-content와 max-content는 콘텐츠의 크기에 따라 자동으로 높이를 설정합니다. 두 값은 인라인 콘텐츠에 적용될 때, 기본적으로 같은 높이를 가지게 됩니다. 이 값들은 콘텐츠가 차지하는 공간에 맞춰 최적의 높이를 설정하기 때문에, 텍스트나 인라인 콘텐츠 내용이 길거나 짧더라도 동일한 방식으로 동작합니다

fit-content

min-height 속성에서 fit-content 값은 부모 요소의 높이나 레이아웃 제약을 고려하여
요소의 콘텐츠 최높이를 min-content와 max-content 사이의 적합한 값으로 설정합니다.

주의할 점

min-height 속성을 사용할 때 다음의 두 가지 주의할 점이 있습니다.

min-height 속성을 지원하지 않는 요소

display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table columns(<col>), column groups(<colgroup>)인 요소에서는 min-height 속성이 적용되지 않습니다.

HTML 
<span>display가 inline</span>
CSS min-height: 150px;은 적용되지 않습니다. 
span {
    display: inline; /* 이 값을 지정하지 않아도 span 요소의 display 초깃값은 inline이다 */
    min-height: 150px;
    background-color: gold;
}

min-height: 150px;은 적용되지 않습니다. 자신 요소의 보여지는 콘텐츠의 높이입니다.

실제 적용된 모습

<백분율(%)> 단위 값 시 컨테이닝 블록(containing block)에 대한 의존성과 동작

요소에 min-height 속성의 값으로 백분율(%) 값을 사용할 때의 동작 방식에 대한 주의가 필요합니다.

백분율(%) 값은 컨테이닝 블록(containing block)의 높이에 비례하여 계산되기 때문에, 컨테이닝 블록(containing block)의 높이가 명시적으로 설정되지 않으면 해당 요소의 백분율(%) 높이가 제대로 계산되지 않을 수 있습니다.
컨테이닝 블록(containing block)의 높이가 명확히 정의되지 않거나, 해당 요소가 절대 위치(absolute positioning)가 아니면 백분율(%) 값이 자동으로 min-height: 0으로 처리된다는 점을 명확히 이해해야 합니다.

다음의 예제로 살펴보겠습니다.

HTML 
<div class="parent">
    <div class="child">현재 요소</div>
</div>
CSS 
.parent {
    border: 5px dashed red;
    background-color: silver;
}
.child {
    background-color: gold;
    width: 150px;
    min-height: 50%;
}
실제 적용된 모습

컨테이닝 블록(containing block)인 부모 요소 .parent에 높이가 지정되지 않았기 때문에, 자식 요소인 .child의 min-height: 50%는 부모의 높이를 기준으로 계산할 수 없습니다. 이 경우, CSS에서는 기본적으로 자식 요소의 최소 높이가 0으로 계산됩니다. 이 예제는 백분율(%) 값의 min-height가 부모 요소의 높이를 기준으로 계산되지 않음을 잘 보여줍니다.

형식 정의

min-height 속성의 형식 정의
초깃값 auto
적용 요소 display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)이면서
position이 static 또는 relative 또는 sticky일 경우(단, 플렉스 박스나 그리드 박스의 아이템이 아니어야 함)와
table columns(<col> ), column groups(<colgroup>)인 요소를 제외한 모든 요소
상속 아니오
애니메이션 <길이> 단위 값, <백분율(%)> 단위 값, calc()로 계산된 값

브라우저 호환성

min-height 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
min-height 1 12 3 1
auto 21 12 34 7
max-content 46 79 66 11
min-content 46 79 66 11
fit-content 46 79 94 11

명세서

min-height 속성의 명세서 사양
명세서 사양
min-height CSS Box Sizing Module Level 3
#min-size-properties

참고문헌

같이 보기