'높이' 속성을 정의할 때 '위치: 고정' 바닥글이 작동하지 않는 이유는 무엇입니까?

'높이'가 정의된 경우 '위치: 고정'이 작동하지 않음

CSS를 사용하여 고정 헤더를 생성할 때 일반적으로 다음과 같은 문제가 발생합니다. 바닥글 div의 높이 속성을 설정합니다. 그러나 이로 인해 때때로 끈끈한 동작이 실패할 수 있습니다.

그 이유는 끈끈한 위치 지정이 고정 지점을 결정하기 위해 포함 블록에 의존하기 때문입니다. 바닥글 div에 높이 속성이 정의되면 컨테이너 블록이 됩니다. 결과적으로 바닥글 div는 이미 포함 블록의 가장자리에 있으며 더 이상 고정 동작을 트리거하기 위해 교차해야 하는 임계값이 없습니다.

이 문제를 해결하려면에서 높이 속성을 제거하세요. 바닥글 div. 이렇게 하면 본문이 포함 블록이 되고 바닥글 div가 의도한 대로 페이지 하단에 고정될 수 있습니다.

다음은 CSS를 수정하여 끈적끈적한 부분을 수정하는 방법의 예입니다. 동작:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

이번 변경으로 이제 바닥글 div가 의도한 대로 페이지 하단에 고정됩니다.

위 내용은 '높이' 속성을 정의할 때 '위치: 고정' 바닥글이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!