AAtomic CSS

min-height

요소의 최소 높이를 설정합니다. 콘텐츠가 적어도 지정된 높이 이상을 보장합니다. minh100vh로 페이지 전체 높이를 보장하는 것이 가장 대표적인 사용법입니다.

단위가 있는 클래스

minh{값}{단위} 패턴으로 다양한 단위를 사용할 수 있습니다.

클래스CSS설명
minh100pxmin-height: 100px최소 100px
minh200pxmin-height: 200px최소 200px
minh50remmin-height: 50rem최소 500px (50rem)
minh100vhmin-height: 100vh최소 뷰포트 전체 높이
minh50vhmin-height: 50vh최소 뷰포트 절반 높이
minh100pmin-height: 100%부모 높이의 100% 이상

키워드 클래스

클래스CSS설명
minhamin-height: auto브라우저 기본값
minhnmin-height: none최소 높이 제한 없음
minhfcmin-height: fit-content콘텐츠에 맞춤
minhmincmin-height: min-content콘텐츠의 최소 크기
minhmaxcmin-height: max-content콘텐츠의 최대 크기

시각적 비교

콘텐츠가 적을 때 min-height가 최소 높이를 보장합니다.

min-height 없음

짧은 콘텐츠

콘텐츠 크기에 맞게 줄어듦

minh20rem — minh20rem

짧은 콘텐츠

콘텐츠가 적어도 200px 높이 보장

사용 예시

<!-- 풀 뷰포트 페이지 (푸터 하단 고정) -->
<div class="minh100vh dg gtrauto-1fr-auto">
  <header>헤더</header>
  <main>콘텐츠가 적어도 푸터가 하단에</main>
  <footer>푸터</footer>
</div>

<!-- 히어로 섹션 최소 높이 -->
<section class="minh50vh df jcc aic bg18181B">
  <h1 class="cFAFAFA fs4rem">히어로 타이틀</h1>
</section>

<!-- 카드 최소 높이 보장 -->
<div class="dg gtcr3-1fr gap2rem">
  <div class="minh20rem bg18181B p2rem br8px">Card 1</div>
  <div class="minh20rem bg18181B p2rem br8px">Card 2</div>
  <div class="minh20rem bg18181B p2rem br8px">Card 3</div>
</div>

팁

푸터를 하단에 고정하기

minh100vh를 body나 메인 래퍼에 적용하고 dg gtrauto-1fr-auto와 조합하면 콘텐츠가 적어도 푸터가 항상 화면 하단에 위치합니다.

heightmax-heightmin-width