width, height >> 100% 에서 마이너스 값으로 설정하기

화면을 구성하다보니 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