상위 요소를 기준으로 고정 요소의 너비를 설정하는 방법은 무엇입니까?

상위 요소를 기준으로 고정 요소 너비 이해

상위 요소를 기준으로 고정 div의 너비를 정의할 때 고정 요소가 다음과 같은 경우 문제가 발생합니다. 대신 전체 창 너비를 차지합니다. 이는 고정 위치 지정이 일반 흐름에서 요소를 제거하여 상위 요소 너비와 독립적이 되기 때문입니다.

해결책: 상위 너비 상속

이 문제를 해결하려면 , 해결책은 상위 div의 너비를 상속하는 것입니다. 너비를 추가하여: 상속; 모든 내부 div에 대해 고정 요소는 직계 상위 요소의 너비를 채택합니다.

JavaScript Alternative

width: 상속;을 지원하지 않는 이전 브라우저의 경우 JavaScript 해결 방법을 사용할 수 있습니다. 페이지 크기가 조정되거나 내용이 변경될 때마다 고정 요소의 너비를 명시적으로 설정하는 함수를 사용하는 것이 포함됩니다. 이렇게 하면 고정 요소가 상위 요소와 원하는 관계를 유지할 수 있습니다.

예 및 데모

width: 상속; 여기에서 찾을 수 있습니다: https://jsfiddle.net/4bGqF/9/. 또는 다음과 같이 JavaScript 솔루션을 구현할 수 있습니다.

// Get the parent div's width
var parentWidth = document.getElementById("container").offsetWidth;

// Apply the width to the fixed div
document.getElementById("fixed").style.width = parentWidth + "px";

위 내용은 상위 요소를 기준으로 고정 요소의 너비를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!