JavaScript에서 요소의 최소 높이를 설정하려면 minHeight 속성을 사용하면 됩니다. 이 속성은 CSS의 min-height 스타일과 동일한 역할을 하며, 요소가 아무리 내용이 적더라도 지정된 높이보다 작아지지 않도록 보장합니다.
아래 예제는 버튼을 클릭하면 minHeight 속성을 이용해 div 요소의 최소 높이를 설정하는 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 300px;
background-color: gray;
overflow: auto;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 최소 높이가 설정됩니다.</p>
<button type="button" onclick="display()">최소 높이 설정</button>
<div id="box">
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.minHeight = "400px";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분은 다음 한 줄입니다.
document.getElementById("box").style.minHeight = "400px";- document.getElementById("box"): id가
box인 요소를 가져옵니다. - .style.minHeight: 해당 요소의 인라인 스타일 중
min-height값에 접근합니다. - "400px": 최소 높이를 400픽셀로 지정합니다. 단위(px, %, em 등)를 반드시 문자열로 함께 넣어야 합니다.
버튼을 클릭하면 display() 함수가 실행되어 div의 최소 높이가 400px로 설정됩니다. 내용이 적어도 요소의 높이는 400px 아래로 줄어들지 않으며, 내용이 더 많으면 자동으로 늘어나고 overflow: auto 설정에 따라 스크롤이 표시됩니다.