[ CSS ] 동적인 높이를 가진 div에 세로 스크롤 생성

목표

브라우저의 크기에 따라 컨텐츠 영역이 동적인 높이 값을 가지고 있으며, 내용이 많을 때만 스크롤이 자동 생성된다.

 

---

 

문제

1. 높이를 정적으로 정하면 브라우저의 크기에 따라 컨텐츠 영역이 동적으로 변경되지 않음
2. 높이를 %로 주거나 모호하게 주면 스크롤이 생성되지 않음

 

---

 

구현

상위 컴포넌트

.r-table {
	position: relative;
}

 

 

내부 영역

.r-table-content { 
    position: absolute;
    top: 172px;                    // 위치
    height: calc(100% - 175px);    // 동적 높이
    overflow-y: auto;              // 스크롤바 생성
}

 

 

 

---

 

결과

브라우저 높이 ⬆

• 컨텐츠 영역의 높이 ⬆
• 스크롤 길이 긺

 

 

브라우저 높이 ⬇

• 컨텐츠 영역의 높이  ⬇
• 스크롤 길이 짧음

 

 

 

 

 

 

---

[ 참고 자료 ]

[CSS] scroll 영역의 크기를 100%로 만드는 방법