페이지 또는 콘텐츠 하단 중 더 낮은 곳에 남아 있는 고정 바닥글을 만드는 방법은 무엇입니까?

페이지 하단이나 콘텐츠 중 낮은 쪽 바닥글 위치

섹션이 다양하면 당황스러운 문제가 발생할 수 있습니다.

섹션은 브라우저 창의 아래쪽 경계를 준수하면서 보이는 콘텐츠의 맨 아래에 유지됩니까?

Flexbox 버전

Flexbox를 사용하는 이점이 있는 사람들에게 이 끈적한 바닥글을 달성하는 것은 케이크. 높이 확장 래퍼가 있는 플렉스 컨테이너에 모든 요소를 ​​포함하면 바닥글이 동적 콘텐츠에 쉽게 적응할 수 있습니다.

디스플레이: flex 및 플렉스 방향: 열로 래퍼 요소를 구성하기만 하면 됩니다. 그런 다음 다음과 같이 flex 값이 0을 초과하는 하나 이상의 형제 요소를 할당합니다.

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

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

article {
  flex: 1;
}

Html Markup:

<div>

이 접근 방식은 바닥글을 페이지 하단에 효과적으로 붙입니다. 콘텐츠가 짧은 경우 브라우저 창을 조정하고 긴 콘텐츠의 높이에 맞게 위치를 동적으로 조정합니다.

위 내용은 페이지 또는 콘텐츠 하단 중 더 낮은 곳에 남아 있는 고정 바닥글을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!