고정 머리글이 있는 페이지 하단에 바닥글을 배치하는 방법은 무엇입니까?

고정 헤더가 있는 페이지 하단에 바닥글 배치

문제 및 요구 사항 이해:

귀하가 원하는 것 고정된 헤더가 있는 경우에도 바닥글을 페이지의 맨 아래에 배치합니다. 이렇게 하면 position: 고정 사용이나 바닥글이 보이는 화면 하단에 없어집니다.

Ryan Fait의 고정 바닥글 방법:

Ryan Fait의 접근 방식을 다음과 같이 사용할 것입니다. 그것은 당신의 특정을 충족 조건:

단계:

1. HTML 및 본문 높이를 100%로 설정: 높이 정의: 에 대해 100% 및 100% 뷰포트 높이를 설정합니다.
2. 콘텐츠에 100% 최소 높이 제공: #content에 최소 높이: 100%를 할당하여 전체 뷰포트 높이를 차지하도록 합니다.
3. 바닥글을 절대적으로 배치하고 콘텐츠 오프셋: 아래 바닥글을 배치하려면 #content, #content에 바닥글 높이와 동일한 음수 여백을 지정합니다. 그런 다음 #footer를 #content 위에 배치하도록 절대 위치를 지정하세요.

4. 콘텐츠가 바닥글과 겹치지 않도록 방지: 두 가지 옵션:

   • Spacer 요소:
   • Padding-Bottom 추가 및 Box-Sizing: #content에 padding-bottom: 100px 및 box-sizing: border-box를 사용합니다(적절한 공급업체 접두사 사용).

   헤더 추가:

   1. 헤더 일반 흐름에서: 일반 흐름의 헤더의 경우 #content 내에 중첩합니다.
   2. 절대 위치 헤더: 헤더를 절대적으로 배치하려면 이에 따라 #content의 패딩 상단을 조정합니다. .

   현대적인 접근 방식 Box-Sizing:

   최신 브라우저는 box-sizing: border-box를 완벽하게 지원하므로 공백 요소가 필요하지 않습니다. 그러나 공백 요소를 사용하는 것은 더 넓은 브라우저 호환성에 적합합니다.

   결론:

   이 접근 방식은 헤더를 고정하여 모든 장치에서 최적의 디스플레이를 보장합니다.