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 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

실제 적용된 모습

<퍼센트(%)> 단위 값

부모 요소의 높이에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제
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, column groups인 요소에서는 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;은 적용되지 않습니다. 자신 요소의 보여지는 콘텐츠의 높이입니다.

실제 적용된 모습

<퍼센트(%)> 단위 값 시 부모 요소에 대한 의존성과 동작

요소에 min-height 속성의 값으로 퍼센트 값을 사용할 때의 동작 방식에 대한 주의가 필요합니다.

퍼센트 값은 부모 요소(상위 요소)의 높이에 비례하여 계산되기 때문에, 부모 요소의 높이가 명시적으로 설정되지 않으면 자식 요소의 퍼센트 높이가 제대로 계산되지 않을 수 있습니다.
부모 요소의 높이가 명확히 정의되지 않거나, 자식 요소가 절대 위치(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%;
}
실제 적용된 모습

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

형식 정의

min-height 속성의 형식 정의
초깃값 auto
적용 요소 display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table columns, column groups인 요소를 제외한 모든 요소
상속 아니오
애니메이션 <길이> 단위 값, <퍼센트(%)> 단위 값, 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

참고문헌

같이 보기