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

Bitfolio

 

React로 개발한 가상화폐 정보 사이트 (bitfolio.me)

 

위 사이트를 Non-scrollable 디자인으로 개발하면서 겪은 에로 사항이다.

스크롤을 사용하지 않기 위해 상단의 Header와 Contents 영역의 height %로 지정해주었고

화면의 세로길이와 관련 없이 항상 꽉 차는 화면을 만들고자하였다.

 

당연히 오른쪽에 보이는 채팅창의 화면도 height가 %로 지정되어야했다.

채팅창은 스크롤을 위해 'overflow-y : scroll' 속성이 지정 되어야하는데, 해당 속성은 길이가 %로 지정되면

overflow 발생 시 원하는 크기대로 동작하지 않는 문제가 존재했다.

 

이와 같이 height 100%가 예상한대로 동작하지 않고, 스크롤이 발생해버렸다.

height를 vh나 정확한 px 단위로 고정한 경우라면 예측한대로 동작한다.

하지만, 원하던 결과를 발견할 수 없었기에 검색을 거듭했다.

예상대로 overflow scroll 속성을 사용 시에는 해당 축의 길이가 %가 아닌 값으로 정확히 정해져있어야한다는 것이었고,

오랜 검색 끝에 이를 해결하는 방법을 찾았다.

 

overflow 속성을 가진 하위 컴포넌트의 position을 absolute로 설정하고 크기를 %로,

이를 감싸는 상위 컴포넌트의 position을 relative로 설정하고 크기를 %로 주면 원하는대로 동작한다.

코드는 다음과 같다.

 

const ChatContainer = styled.div`
  height: 100%;
  width: 100%;
  position: relative;
`;


const ChatScrollBox = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-right: 4px;
  color: black;
  overflow-y: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 4px;
    border-radius: 25px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 4px;
  }
`;

<ChatContainer>
        {chatData.length !== 0 && (
          <ChatScrollBox id="chatContent" ChatHistory>
            {Object.values(chatData).map(
              (e, i) =>
               ... 메시지 박스 컴포넌트
            )}
          </ChatScrollBox>
        )}
      </ChatContainer>