반응형 작업하다 간단한 메모.

 

 

 

조금 그림이 이상한데 현재 상황의 문제점은 다음과 같다. 

아래에 채팅방 목록에 100vh를 주게되면, 100vh는 브라우저의 높이이기 때문에 화면에 딱 맞게 그리지 못하고 아래의 분홍색 섹션처럼 의미없이 길어지는 영역이 발생했다.

 

이러한 문제점을 해결하기 위해서, 해당 분홍색 섹션의 높이를 calc를 사용해서 빼주어 문제를 해결할 수 있었다.

간단하지만 또 까먹기 때문에 메모한다.

코드는 다음과 같다.

 

 height: calc(100vh - 200px);