페이지나 콘텐츠 중 더 낮은 쪽 하단에 유지되는 고정 바닥글을 만들려면 어떻게 해야 합니까?

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

소개

웹 개발에서는 다음이 필수적입니다. 특히 동적 콘텐츠를 처리할 때 웹페이지에서 요소의 올바른 위치를 보장합니다. 일반적인 과제 중 하나는 페이지 또는 콘텐츠의 하단에 남아 있는 바닥글을 만드는 것입니다.

문제 설명

제공된 HTML 구조에는 다음이 포함됩니다. 머리글, 탐색, 기사 및 바닥글을 포함하는 상위 래퍼 요소(#main-wrapper). 문제는 기사 요소 내의 콘텐츠 높이에 따라 바닥글의 위치를 ​​동적으로 조정하는 것입니다. 내용이 많을 때는 바닥글을 페이지 하단에 고정해야 하지만, 내용이 제한되면 브라우저 창 하단으로 이동해야 합니다.

Flexbox 솔루션

하나의 강력함 이 문제를 해결하기 위한 현대적인 접근 방식은 Flexbox를 활용하는 것입니다. Flexbox는 컨테이너 내 요소의 위치 지정 및 정렬을 단순화하는 다목적 레이아웃 시스템을 제공합니다. 요소를 수직으로 정렬하는 Flexbox의 기능을 활용하여 원하는 고정 바닥글 동작을 달성할 수 있습니다.

CSS 코드

다음 CSS 코드는 Flexbox를 사용하여 고정 바닥글 동작을 구현합니다. 바닥글:

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

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

article {
  flex: 1;
}

이 설정에서 #main-wrapper 요소는 flexbox 컨테이너입니다. flex-direction은 열로 설정되어 있습니다. 즉, 요소가 수직으로 쌓이게 됩니다. 기사 요소에는 flex: 1이 있어 헤더와 탐색이 차지하지 않는 나머지 공간을 차지합니다.

기사 내에 콘텐츠가 충분하면 바닥글을 아래로 밀어서 위치를 지정합니다. 페이지 하단. 그러나 콘텐츠가 제한되면 #main-wrapper 요소의 최소 높이가 항상 뷰포트를 채우도록 하기 때문에 기사가 줄어들고 바닥글이 브라우저 창의 아래쪽으로 동적으로 이동합니다.

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