CSS min-height 속성 완벽 정리 – 요소의 최소 높이 설정 방법

CSS의 min-height 속성을 사용하면 요소 콘텐츠 박스(content box)의 최소 높이를 고정할 수 있습니다. 이 속성이 적용되면 실제 height 값이 min-height보다 작더라도 콘텐츠 박스가 그 이하로 줄어들지 않습니다.

즉, 콘텐츠 양이 적은 경우에도 일정한 최소 높이를 유지해야 하는 레이아웃을 만들 때 매우 유용합니다.

문법(Syntax)

CSS min-height 속성의 기본 문법은 다음과 같습니다.

Selector {
    min-height: /*값*/
}

사용 가능한 값

길이 단위(px, em, rem 등): 고정된 최소 높이 지정
백분율(%): 부모 요소 높이 기준의 백분율
auto: 기본값으로, 최소 높이 제한 없음

예제 1

버튼 클릭 시 min-height 값을 동적으로 변경하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS min-height 속성</title>
</head>
<style>
* {
    padding: 2px;
    margin:5px;
}
button {
    border-radius: 10px;
}
#containerDiv {
    width:70%;
    margin: 0 auto;
    padding:20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
    border-radius: 10px;
}
#contentDiv{
    min-height:150px;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
    function add() {
        document.querySelector('#contentDiv').style.minHeight = "100px";
    }
</script>
</body>
</html>

실행 결과

위 코드의 실행 결과는 다음과 같습니다.

'Set minHeight' 버튼 클릭 전 –

CSS min-height 속성 완벽 정리 – 요소의 최소 높이 설정 방법

'Set minHeight' 버튼 클릭 후 –

CSS min-height 속성 완벽 정리 – 요소의 최소 높이 설정 방법

버튼을 클릭하면 JavaScript를 통해 contentDiv의 min-height가 100px로 변경되는 것을 확인할 수 있습니다.

예제 2

두 개의 콘텐츠 div에 서로 다른 양의 텍스트가 있을 때 min-height를 적용하는 또 다른 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS min-height 속성</title>
</head>
<style>
* {
    padding: 2px;
    margin:5px;
}
button {
    border-radius: 10px;
}
#containerDiv {
    width:70%;
    margin: 0 auto;
    padding:20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
    border-radius: 10px;
}
#contentDiv1, #contentDiv2{
    width:50%;
    border: 2px solid black;
    margin: 0 auto;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
    function add() {
        document.querySelector('#contentDiv1').style.minHeight = "95px";
    }
</script>
</body>
</html>

실행 결과

위 코드의 실행 결과는 다음과 같습니다.

'Set minHeight' 버튼 클릭 전 –

CSS min-height 속성 완벽 정리 – 요소의 최소 높이 설정 방법

'Set minHeight' 버튼 클릭 후 –

CSS min-height 속성 완벽 정리 – 요소의 최소 높이 설정 방법

텍스트 양이 적은 첫 번째 div(contentDiv1)에 min-height: 95px가 적용되면서 두 번째 div와 비슷한 높이를 갖게 되는 것을 확인할 수 있습니다. 이처럼 min-height 속성은 콘텐츠 분량과 관계없이 균일한 레이아웃 높이를 유지하는 데 효과적입니다.