더 넓은 브라우저 호환성을 위해 CSS Calc() 없이 동적 너비 조정을 달성하는 방법은 무엇입니까?

CSS Calc의 대안

CSS calc() 함수를 사용하면 요소의 동적 너비를 편리하게 조정할 수 있습니다. 최신 브라우저에서는 지원되지만 IE 5.5 이하와 같은 이전 버전과의 호환성이 부족합니다.

이 문제를 해결하고 Opera 및 Android 브라우저로 지원을 확장하려면 대신 box-sizing: border-box 사용을 고려하세요.

예를 들어, "sideBar" 클래스가 있고 너비가 300px인 div가 있다고 가정해 보겠습니다. 사이드바 너비에 따라 "콘텐츠" div의 너비를 동적으로 조정하려면 다음을 사용하지 마세요.

.content {
  width: calc(100% - 300px);
}

대신 다음 스타일을 적용하세요.

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

고정 너비를 정의하여 사이드바의 경우 box-sizing: border-box를 콘텐츠 div에 적용하면 콘텐츠 너비가 사이드바의 너비에 따라 자동으로 조정되므로 calc()가 필요하지 않습니다. 이 접근 방식은 이전 버전의 IE, Opera 및 Android 브라우저를 포함하여 더 넓은 범위의 브라우저에서 호환성을 보장합니다.

위 내용은 더 넓은 브라우저 호환성을 위해 CSS Calc() 없이 동적 너비 조정을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!