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

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

Linda Hamilton

풀어 주다： 2025-01-03 01:25:39

원래의

850명이 탐색했습니다.

How Can I Set an Element's Height or Width as a Percentage Minus a Fixed Pixel Value in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：Safari에서 배경 이미지가 제대로 표시되지 않는 이유는 무엇입니까? 다음 기사：CSS가 이미지의 소스 속성을 직접 변경할 수 있나요?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2419

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2549

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

2157

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

2039

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

2126