페이지 본문의 높이와 #main 요소가 지정되어 있는데 왜 '위치: 고정'이 바닥글에서 작동하지 않나요?

위치: 높이가 지정된 경우 끈적임이 작동하지 않음

문제:

사용자에게 발생하는 문제 #footerNav로 지정된 바닥글이 위치를 준수하지 못하는 경우: 높이 속성이 설정된 경우 고정 동작 페이지 본문과 #main 요소 모두에 대해. 바닥글은 뷰포트 상단에 고정되어 스크롤되는 대신 정적으로 유지됩니다.

해결책:

이 문제는 높이 속성으로 인한 콘텐츠 오버플로로 인해 발생합니다. position: 끈적끈적함은 포함 블록이 지정된 임계값에 도달할 때만 활성화되도록 설계되었습니다. 이 경우 body { height: 100%; } 바닥글이 포함 블록의 끝에 즉시 도달하는 상황을 만들어 position:sticky가 활성화되지 않도록 합니다.

설명:

position 정의에 따르면 : 끈적, 요소가 포함 블록 내에서 지정된 임계값을 넘을 때 고정 위치가 적용됩니다. 이 경우 컨테이닝 블록은 몸체이며, 몸체 { height: 100% } 가 설정됨에 따라 몸체의 높이는 뷰포트로 제한됩니다.

#main { height: 92% } 가 지정된 경우 , 사용 가능한 높이의 92%가 #main에 할당되고 #footerNav에는 8%만 남습니다. #footerNav는 이미 포함 블록(본문)의 맨 아래에 있으므로 뷰포트 경계를 지나 스크롤하여 위치 고정을 활성화할 수 없습니다.

해결책:

문제를 해결하려면 콘텐츠가 포함 블록을 오버플로하지 않는지 확인하세요. 이는 본문 및 #main에서 높이 속성을 제거하여 콘텐츠가 오버플로를 일으키지 않고 뷰포트 내에서 자연스럽게 흐르도록 함으로써 달성할 수 있습니다.

추가 참고 사항:

• vh와 같은 백분율로 높이를 지정하면 동일한 문제가 발생할 수 있으므로 여전히 권장되지 않습니다.
• 문제는 다음과 같습니다. Firefox 61(Nightly), Safari 53(Tech Preview) 및 Chrome 65에서 발생합니다.

위 내용은 페이지 본문의 높이와 #main 요소가 지정되어 있는데 왜 '위치: 고정'이 바닥글에서 작동하지 않나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!