스크롤할 때에도 페이지 하단에 바닥글을 유지하는 방법은 무엇입니까?

스크롤 막대가 오버플로된 콘텐츠 하단의 위치 Div

페이지 콘텐츠가 뷰포트를 넘어 확장되면 개발자는 종종 바닥글이 뷰포트 위에 나타나는 문제에 직면합니다. 페이지의 하단 경계. 이 동작을 해결하려면 제공된 이미지에 설명된 구현을 고려하십시오.

처음에 활용된 CSS 스니펫은 위치: 절대 및 하단: 30px를 특징으로 하며 div를 뷰포트 하단에 배치합니다. 그러나 스크롤할 때 div는 고정된 상태로 유지되어 콘텐츠의 하단 한계에서 분리됩니다.

해결책

div를 콘텐츠 하단에 지속적으로 고정하는 최적의 접근 방식에는 다음이 필요합니다. 고정 포지셔닝의 고용. 수정된 CSS는 다음과 같습니다.

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

이 수정으로 원하는 효과를 얻을 수 있습니다. 스크롤에 관계없이 div는 모든 콘텐츠의 맨 아래에 고정된 상태로 유지됩니다. 제공된 바이올린은 다음 동작을 보여줍니다: http://jsfiddle.net/uw8f9/.

위 내용은 스크롤할 때에도 페이지 하단에 바닥글을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!