css 속성 값으로 계산 식 넣기.

calc를 사용하면 css 값을 계산식으로 사용할 수 있습니다.

 

width: calc(100vh - 60px);

 

calc는 position으로 fixed나 absolute를 사용해서 특정 위치에 고정시킨 div 크기를 정할 때 유용합니다.

 

이때, right, bottom이 0px인 경우 별 문제없습니다.

 

그러나, 화면 중간에 표시할 때 width, height를 비율로 사용하면 원하는 결과가 안 나옵니다.

 

이때 calc를 사용하면 창 크기를 변경했을 때 내가 원하는 만큼 화면을 채울 수 있습니다.

 

아래와 같이 height에 calc를 사용하면 바닥에서 30px 이동한 후 높이를 다 채울 수 있습니다.

 

 

 

.calc-test {
  position: fixed;
  right: 5px;
  bottom: 30px;
  width: 60vw;
  height: calc(100vh - 30px);
  border: 3px solid black;
  border-radius: 5px;
}

 

https://developer.mozilla.org/ko/docs/Web/CSS/calc() 

calc() - CSS: Cascading Style Sheets | MDN