스크롤하는 동안 페이지 하단에 Div를 유지하는 방법은 무엇입니까?

콘텐츠 스크롤 시 페이지 하단에 Div 유지

스크롤에도 불구하고 바닥글이 페이지 하단에 유지되는 효과를 얻으려면 특정 접근하다. 원하는 결과는 div를 페이지 하단으로 푸시하는 것과 유사하지만 해결책은 다릅니다.

핵심은 다양한 CSS 위치 지정 옵션의 동작을 이해하는 데 있습니다. 이 경우 바닥글을 뷰포트 하단으로 이동하기 위해 position:absolute가 사용되었습니다. 그러나 이 위치는 뷰포트와 관련하여 고정된 상태로 유지되므로 콘텐츠가 스크롤되는 경우에도 바닥글이 동일한 위치에 유지됩니다.

div가 페이지 콘텐츠 하단에 유지되도록 하려면 위치: 고정 대신 사용해야 합니다:

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

이 수정을 통해 내용이 넘치는지 여부에 관계없이 바닥글이 페이지 하단에 고정됩니다. 콘텐츠와 함께 스크롤되며 표시되는 모든 요소의 맨 아래에 남아 있습니다. 이 동작은 Stack Overflow와 같은 웹사이트에서 흔히 볼 수 있으며, 페이지에 수많은 질문과 답변이 있어도 바닥글이 하단에 유지됩니다.

position:fixed를 사용하면 div가 페이지 하단에 유지됩니다. 콘텐츠가 스크롤될 때 페이지의 동적 높이에 맞춰 페이지 콘텐츠를 조정하고 원하는 레이아웃을 유지합니다.

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