고정 헤더가 있는 페이지 하단에 바닥글을 붙이는 방법은 무엇입니까?

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

바닥글을 하단에 배치하려면 페이지의 머리글도 고정되어 있으면서 바닥글을 상대적으로 배치하는 "위치: 고정"에 의존하지 않는 접근 방식을 채택해야 합니다. 페이지 자체 대신 뷰포트를 사용합니다.

Ryan Fait의 방법 활용

Ryan Fait의 접근 방식은 머리글과 바닥글이 모두 고정된 시나리오에서 간단하고 효과적입니다. 높이:

1. 및 요소를 100%로 설정하세요.
2. #footer를 페이지 아래로 밀어내려면 #content 요소에 최소 높이 100%를 지정하세요.
3. 바닥글을 끌어당기려면 #content에 음수 여백 하단을 사용하세요.
4. #content를 기준으로 바닥글 위치를 조정하여 표시되도록 합니다. top.
5. #content에 공백을 추가하거나 padding-bottom 및 box-sizing을 사용하여 과잉 내용을 관리하고 바닥글과 겹치는 것을 방지합니다.

포함 헤더

헤더가 정상적인 흐름을 유지해야 하는 경우 간단히 헤더에 추가하세요. #콘텐츠. 절대적으로 위치를 지정하려면 스페이서를 사용하거나 패딩 상단과 상자 크기 조정을 사용할 수 있습니다.

호환 가능한 브라우저 및 대안

최신 브라우저 지원 상자 -크기 조정: 테두리 상자. 더 넓은 브라우저 지원을 위해서는 대신 공백 요소를 사용하는 것이 좋습니다.

위 내용은 고정 헤더가 있는 페이지 하단에 바닥글을 붙이는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!