영리한 끈적 끈적한 바닥 글 기술

"끈적 끈적한 바닥 글"에 관해서는, 대부분의 사람들은 요즘 대부분의 사람들이 position: sticky : 부모 요소 스크롤의 맥락에서 바닥 글 요소는 화면에 고정됩니다.

그러나 이것은이 기사의 초점이 아닙니다. "끈적 끈적한 바닥 글"의 개념은 position: sticky 보다 일찍 나타 났으며 그 의미는 약간 달랐습니다. 아이디어는 페이지 컨텐츠가 바닥으로 푸시하기에 충분하지 않더라도 화면 하단에 고정됩니다. 그러나 콘텐츠가 충분하면 아래에 밀려 나게되어 기쁩니다.

우리는 과거에 calc() , Flexbox 및 CSS 그리드와 같은 일부 현대 기술을 포함하여 5 가지 구현 방법을 도입했습니다.

이제 여섯 번째 방법은 무대에 있습니다! 독자 Sílvio Rosa는 다음과 같은 방법을 제안했습니다.

(스티커 바닥 글 이이 화면 크기에서 가장 효과적이기 때문에 중간 크기의 데스크탑 화면에서 보는 것이 가장 좋습니다.)

코드는 매우 간결합니다.

 html, 바디 {높이 : 100%;}

바디> 바닥 글 {
  위치 : 스티커;
  상단 : 100VH;
}

내가 고맙게 생각하는 한 가지는 비 발자로 콘텐츠에 특별한 추가 랩퍼가 필요하지 않다는 것입니다.

또한 약간 수수께끼입니다. 내가 탑 을 볼 때 top: 100vh; 그러나 그것은 정확히 영리입니다. 바닥 글 크기에 관계없이 (마법의 숫자는 필요하지 않음), 끈적 끈적한 포지셔닝은 "다시 짜증납니다". 그러나 컨텐츠와 겹치지 않으므로 끈적 끈적한 바닥 글 패턴의 핵심 원리 인 컨텐츠에 따라 푸시되는 것이 기쁩니다.

위 내용은 영리한 끈적 끈적한 바닥 글 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!