동적 페이지 콘텐츠 하단에 유지되는 고정 바닥글을 만들려면 어떻게 해야 합니까?

페이지 또는 콘텐츠 하단의 바닥글

소개

페이지 하단의 바닥글을 유지하는 것은 어려울 수 있습니다. 페이지의 콘텐츠가 동적이고 높이가 다양한 경우. 이 기사에서는 페이지 콘텐츠 하단이나 브라우저 창 하단 중 어느 쪽이 더 낮은지에 따라 자동으로 바닥글을 배치하는 기술에 대해 설명합니다.

동적 콘텐츠 로딩

귀하의 시나리오에서 , 콘텐츠는

에 동적으로 로드됩니다. JavaScript를 사용하는 요소입니다. 콘텐츠가 변경됨에 따라

또한 변경됩니다. 이러한 동적 콘텐츠 로딩에도 불구하고 페이지 콘텐츠 하단의 바닥글을 유지하고 싶습니다.

Flexbox를 사용한 고정 바닥글

Flexbox는 고정 바닥글에 대한 간단한 솔루션을 제공합니다. flex-direction이 열로 설정된 flex 컨테이너(#main-wrapper)를 생성하면 컨테이너 내에서 여러 요소를 수직으로 정렬할 수 있습니다.

Flexbox로 고정 바닥글을 만드는 핵심은 바닥글을 제외한 모든 요소에 0보다 큰 flex 값을 적용합니다. 이렇게 하면 해당 요소가 확장되어 컨테이너 내 사용 가능한 공간을 수직으로 채울 수 있습니다.

이 경우

요소에는 flex: 1이 할당되어 고정 높이 헤더 및 탐색 요소 뒤에 남은 공간을 채우기 위해 요소를 확장하도록 브라우저에 지시합니다.

코드 조각

다음 코드는 구현 방법을 보여줍니다. Flexbox를 사용한 끈적한 바닥글:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

결론

flexbox를 사용하고 컨테이너의 min-height 속성(#main-wrapper)을 사용하면 콘텐츠 높이에 따라 위치를 자동으로 조정하는 고정 바닥글을 만들 수 있습니다. 이 접근 방식은 바닥글이 페이지 또는 브라우저 창 하단에 유지되도록 하면서 동적 콘텐츠 로딩을 위한 유연한 솔루션을 제공합니다.

위 내용은 동적 페이지 콘텐츠 하단에 유지되는 고정 바닥글을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!