width, height >> 100% 에서 마이너스 값으로 설정하기
WEB/CSS / 2014. 4. 10. 19:47
화면을 구성하다보니 width 나 height 를 100%에서 몇 픽셀을 뺀 값으로 설정해야 하는데, 자바스크립트에서 설정하는 것도 좀 부담스럽고 해서 검색을 해봤더니 역시나 있었다!!!
CSS3 에서는 calc 라는 함수가 지원되는데 사용법은 아래와 같다.
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
IE 하고 Chrome 에서는 표준 함수가 먹는데, 다른 브라우저는 아직 확인 못해봄... (파폭은 calc 함수가 먹는다.)
참고자료: http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels