css) calc() function

index.html

navbar 클래스의 높이를 100px

banner 클래스의 min-height를 100vh 로 하면

보다싶이 웹브라우저에 스크롤이 생기고 아래로 내리면 banner 클래스의 빨강바탕이 이어진다.

 

우리가 원하는건 스크롤 없이 화면에 navbar와 banner가 들어오도록 하고싶다.

그럴때 calc() 함수를 쓴다.

min-height를 calc(100vh - 100px) 로 설정했다.

즉 이전 100vh했을때 100px만큼 아래 남는 부분이 있었으므로 그만큼 빼주는 것이고

calc 함수가 계산을 대신해준다.