반응형 사이트 제작 시 calc() 스크롤바 오류

짧게 한줄로 어떻게 설명해야할지 모르겠네요. 평소엔 길게 쓰는게 더 힘들었는데 이럴 때만 짧게 쓰는게 힘들지.

바로 긴 설명 들어갑니다.

반응형 사이트를 만들기 위해

body {
	height: 100vh;
}
header {
	height: 80px;
}
main {
	height: clac(100vh - 80px);
}

의 형태로 꾸몄습니다. 그럭저럭 반응형 같기도 하고 괜찮나? 싶었는데 거슬리는 무언가가 발견됐어요.

그냥 볼 때는 문제 없나 싶었는데,

창의 세로 크기를 줄여보니 main으로 지정한 부분이 더 많이 줄어들면서 스크롤바와 아랫부분의 흰 여백이 생깁니다.

개발자 콘솔에서 http, body, header, main 다 찍어봐도 높이는 문제 없이 나오고, margin이나 paddle, border도 문제 없었습니다. 이것저것 뒤져보기도 하고 검색하면서 찾아봤는데...문제 될 만한 부분을 유추해보자면

1. 브라우저 별로 http나 body에 margin이 적용될 수 있다.
2. (문제가 아니라 해결책이지만) http, body에 100%를 적용하면 해결된다
3. calc 함수에 vh와 px를 중복 적용해서 오류가 나는 것

정도가 됐네요.
1번과 2번의 경우 http와 body에 height 100%를 줘도, margin 0을 줘도 문제가 해결되지 않았습니다. 3번의 경우 확인해보고는 싶은데 현재 제 수준으로는 vh와 px을 쓰지 않고 반응형 레이아웃 구현을 못하고 있어서 테스트를 못해보고 있습니다. 하하..

우선은 창 크기를 아주 줄이지 않는 이상 여백이 티가 나지 않고, 바로 눈에 보이는 것은 스크롤바이기에 body에 overflow-y: hidden 적용해 가려놓았습니다.

<미해결>

임시방편으로 눈가림만 해놓았기 때문에 다른 부분을 구현하면서 계속 찾아볼 생각입니다.
부디 해결해서 글을 쓸 수 있었으면 좋겠네요.