CSS에서 요소의 높이나 너비를 백분율에서 고정 픽셀 값을 뺀 값으로 설정하려면 어떻게 해야 합니까?

너비/높이를 백분율 마이너스 픽셀로 설정

CSS에서 흔히 발생하는 문제 중 하나는 요소의 높이나 너비를 컨테이너에서 고정 값을 뺀 백분율로 지정하는 것입니다. 다음 시나리오를 고려해보세요.

컨테이너

알 수 없는 높이와 헤더

그 안에. 헤더 아래에는 알려진 헤더 높이가 18px인 순서가 지정되지 않은 목록이 나머지 공간을 차지하기를 원합니다. 목록의 높이를 "100% - 18px"로 어떻게 동적으로 지정할 수 있습니까?

해결책

해결책은 calc() 함수를 활용하는 데 있습니다.

height: calc(100% - 18px);

이것은 표현식은 알려진 고정 값(18px)을 빼서 높이를 계산하므로 목록의 나머지 공간을 채우기 위해 목록이 확장될 수 있습니다. 컨테이너.

브라우저 호환성

calc()는 널리 지원되지만 일부 레거시 브라우저에는 공급업체별 버전이 필요합니다.

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);

완전한 브라우저 간 호환성을 위해서는 다음을 고려하세요. 마지막에 표준 구문과 함께 모든 버전을 사용합니다:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

위 내용은 CSS에서 요소의 높이나 너비를 백분율에서 고정 픽셀 값을 뺀 값으로 설정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!