CSS를 사용하여 요소의 높이를 100%에서 고정 픽셀 값을 뺀 값으로 설정하려면 어떻게 해야 합니까?

너비/높이를 백분율 마이너스 픽셀로 설정: 단계별 가이드

웹 개발에서는 일관성을 유지하고 코드 혼란을 최소화하는 것이 필수적입니다. 재사용 가능한 구성 요소에 대한 CSS 클래스를 정의할 때 다양한 콘텐츠에 따라 높이를 사용자 정의하는 것이 어려울 수 있습니다. 이 문서에서는 고정된 헤더 높이를 고려한 후 컨테이너 div의 나머지 공간을 차지하도록 순서가 지정되지 않은 목록(ul)의 높이를 설정하려는 일반적인 시나리오를 다룹니다.

이를 달성하기 위해 CSS는 다음을 제공합니다. calc() 함수. 이 기능을 사용하면 CSS 문에서 계산을 수행할 수 있습니다. 이 경우 다음 구문을 사용할 수 있습니다.

height: calc(100% - 18px);

이는 ul의 높이를 상위 요소의 100%에서 18px를 뺀 값으로 설정합니다. 18px는 헤더 div의 고정 높이에 해당합니다.

일부 이전 브라우저에서는 calc() 기능을 지원하지 않을 수 있습니다. 브라우저 간 호환성을 보장하려면 공급업체별 버전의 함수 구현도 고려하세요.

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

CSS에 calc() 함수를 통합하면 다음을 기반으로 ul 높이를 효율적으로 표준화할 수 있습니다. 웹사이트의 동적 콘텐츠. 이 기술은 CSS 코드의 일관성과 유연성을 모두 향상시킵니다.

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