고정 헤더를 사용하여 페이지 하단에 바닥글을 유지하는 방법은 무엇입니까?

고정 헤더로 페이지 하단에 바닥글 유지

문제:

바닥글을 페이지 맨 아래, 다른 모든 콘텐츠 아래에 배치하고 유지하고 싶습니다. 스크롤할 때 고정된 위치처럼 화면에 달라붙지 않고 제자리에 고정됩니다.

해결책:

Ryan Fait의 방법

이 접근 방식은 머리글과 바닥글의 높이가 모두 고정된 시나리오에 적합합니다. 여기에는 다음이 포함됩니다.

1. 및 다음 단계가 작동하도록 100%로 설정하세요.
2. 페이지 콘텐츠(#content)의 최소 높이는 100%입니다.
3. 바닥글 높이와 동일한 #content에 음수 여백-하단을 적용하고 위치를 상대 위치로 설정하여 바닥글을 위로 당깁니다.
4. #content 끝에 공백 요소를 추가하거나 padding-bottom과 box-sizing: border-box를 조합하여 콘텐츠가 콘텐츠 뒤에 숨는 것을 방지합니다. 바닥글.

머리글 추가

바닥글 위치를 유지하면서 머리글을 포함하려면:

1. 머리글을 바닥글에 추가하세요. #content가 정상적인 흐름을 유지해야 하는 경우.
2. 헤더에 절대 위치 지정이 필요한 경우 다음을 추가하세요. 스페이서를 사용하거나 padding-top 및 box-sizing: border-box를 사용하여 내용이 겹치는 것을 방지하세요.

고려 사항:

• 최신 브라우저 지원 상자- 크기 조정: 테두리 상자. 그러나 더 광범위한 지원이 필요한 경우 공백을 사용하십시오.
• 헤더가 이 방법이 작동하려면 바닥글 높이가 고정되어 있습니다.