CSS에서 컨테이너 높이를 백분율에서 고정 픽셀 값을 뺀 값으로 설정하려면 어떻게 해야 합니까?
- Susan Sarandon원래의
- 2024-12-17 16:19:10969검색
컨테이너 높이를 백분율에서 고정 값을 뺀 값으로 설정
웹사이트 전체에서 일관성을 유지하고 불필요한 스타일을 줄이려면 재사용 가능한 CSS 클래스가 도움이 될 수 있습니다. 그러나 컨테이너 요소의 높이를 상위 컨테이너에서 특정 픽셀 값을 뺀 비율로 설정하는 등 특정 요소를 표준화할 때 문제가 발생할 수 있습니다.
컨테이너
헤더
그리고 그 안에 순서가 없는 목록(
- )이 있습니다. 헤더의 높이는 18px로 고정되어 있지만 목록의 높이는 컨테이너 내의 남은 공간을 채우도록 동적으로 조정되어야 합니다. 문제는 목록의 높이를 "100% - 18px"로 지정해야 할 때 발생합니다.
이를 달성하려면 calc() 함수를 활용할 수 있습니다.
height: calc(100% - 18px);
이 함수는 다음을 허용합니다. CSS 내에서 수학적 계산을 수행할 수 있습니다. 이 경우 100%에서 18px를 빼서 목록의 높이를 결정합니다.
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);
위 내용은 CSS에서 컨테이너 높이를 백분율에서 고정 픽셀 값을 뺀 값으로 설정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.