오스냅! React에서 바닥글을 고정하는 방법

"오스냅!"시리즈는 오늘 적용할 수 있는 작은 팁을 탐색합니다.

"이런 바닥글을 이 페이지의 맨 아래에 고정하는 방법???"

페이지의 콘텐츠 양이 화면의 뷰포트/접힌 부분을 넘어가지 않는 것은 일반적인 문제입니다. 이로 인해 바닥글이 페이지 중앙에 다소 성가시게 팝업됩니다.

<div className="content-container"> 
  •••
</div>
<footer className="footer--pin">
  •••
</footer>

모든 기본 페이지 내용은 "content-container"클래스가 있는 div에 배치되어야 합니다.

모든 바닥글 콘텐츠는 모범 사례에 따라 footer 요소에 있어야 하며 "바닥글-핀"클래스가 할당되어야 합니다.

(이 클래스의 이름은 물론 귀하에게 달려 있습니다.)

실제 높이는 margin-top + border-top + padding-top + content + padding-bottom + border-bottom + margin-bottom

Chrome DevTools 박스 모델 섹션에서 찾을 수 있습니다.

.content-container {
  min-height: calc(100vh - 34px);
}

calc()를 사용하면 콘텐츠 div가 바닥글 높이를 뺀 뷰포트의 100%를 차지해야 한다고 말합니다.

이렇게 하면 콘텐츠 컨테이너가 바닥글 높이를 제외한 사용 가능한 모든 화면 공간을 차지하게 되어 사실상 바닥글을 아래로 밀어냅니다.

.footer--pin {
  position: relative;
  left: 0;
  bottom: 0;
}

바닥글을 relative 위치로 설정하고 아래쪽과 왼쪽에 고정합니다.

좋은 점은 페이지에 더 많은 콘텐츠가 추가되더라도 바닥글이 하단에 고정되어 있다는 것입니다.

Figma로 디자인된 썸네일

이 문제에 관하여(오스냅! React에서 바닥글을 고정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gedalyakrycer/ohsnap-this-how-to-pin-footers-in-react-3k1k

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다