[CSS] 스크롤을 해도 background color가 지정되지 않는다면!!

🤷‍♂️문제 발생

팀프로젝트를 하다가 배경색을 지정하기 위해, width 100vw, height 100vh 값을 지정한 container 박스를 만들고, background color를 지정해주었다.

const ContainerDiv = styled.div`
	width: 100vw;
    	height: 100vh;
    	background-color: "beige"
`;

 

처음에는 스타일이 잘 적용되었길래 넘어갔지만, 프로젝트를 진행하다가 그 내부 요소들이 뷰포트를 넘어가게 되고,

스크롤을 내리는 순간 !! 내린 부분에는 background 컬러가 적용이 안되어있는 것을 보았다.

 

 

🕵️문제 원인

 

height: 100vh; 

 

height의 값을 100vh로 지정해주면, 현재 보이는 창을 기준으로 100%만큼의 높이로 지정해준다는 것이다. 

만약 부모요소가 무엇인지 상관하지 않고, 뷰포트에 맞춰 값을 설정하고 싶다면 다음과 같이 "vh" 단위를 사용한다. 

 

따라서 설정된 요소의 배경색은 뷰포트의 100% 높이만 차지하게 된다. 그렇기 때문에 요소 내부에 있는 내용이 뷰포트보다 많아서 overflow가 발생하여 스크롤이 생생되었을 경우, 해당 부분은 뷰포트 영역 이외의 부분으로 인식되어 적용이 안될 수 있다. 

 

 

 

🤷‍♂️해결

1. height: fit-content

vh 단위의 경우 내부 영역이 overflow가 되든 안되든 뷰포트를 기준으로 상대적인 높이를 지정하는 것이다. 따라서 이 부분을 무시하고, 안의 내부 영역에 맞춰 높이를 지정해주면 되지 않을까? 라는 생각에 fit-content로 높이를 지정해보았더니 성공하였다. 

 

2. overflow: auto

overflow 속성의 경우 주어진 요소의 크기보다 내부에 더 많은 양의 내용을 보여줘야하는 상황에 어떻게 보여줄지를 제어하는 속성이다.  이 overflow의 속성 값으로 auto를 주어도 모든 화면에 background 컬러 지정이 가능하다.

 

overflow에 auto 값을 주게 되면 요소의 내부에 있는 컨텐츠가 부모 요소보다 넘쳤을 경우에 스크롤이 생기도록 한다.

이는 containerDiv 내부 컨텐츠가 해당 div를 넘어갔을 때 스크롤이 생기도록 명시함으로써 overflow된 부분의 영역까지도 container div의 영역이 되는 것이다. 

overflow의 속성 값으로는 visible, hidden, scroll, auto가 있다.

 

 

 

참고자료

https://www.daleseo.com/css-overflow/