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

최적의 요소 크기 조정을 위한 백분율 기반 높이 마이너스 픽셀

재사용 가능한 CSS 클래스를 통해 웹사이트 일관성을 향상하고 코드 혼란을 줄이는 것은 칭찬할 만한 노력입니다. 액체 내용물이 담긴 용기를 다룰 때 특정 요소의 높이를 어떻게 설정해야 하는지 결정하는 것이 필요합니다. 이 문서에서는 일반적인 시나리오를 다룹니다.

헤더 div와 순서가 지정되지 않은 목록이 있는 컨테이너 div를 생각해 보세요. 목표는 헤더의 고정 높이인 18px을 제외하고 컨테이너 내의 나머지 높이를 목록에 할당하는 것입니다.

이를 달성하기 위해 CSS는 스타일 규칙 내에서 동적 계산을 허용하는 calc() 함수를 제공합니다.

height: calc(100% - 18px);

이 표현식은 18px 헤더를 제외하고 컨테이너의 100%와 동일한 높이를 목록에 할당합니다. height.

단, 일부 오래된 브라우저에서는 calc() 기능을 지원하지 않을 수 있습니다. 이러한 경우 공급업체별 구현 사용을 고려하세요.

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

calc() 함수를 사용하여 백분율과 고정 값을 효과적으로 결합하면 요소 크기를 미세 조정하고 일관성을 보장하며 전체 사용자를 향상시킬 수 있습니다. 귀하의 웹사이트에서 경험해보세요.

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