콘텐츠 높이에 관계없이 페이지 하단에 바닥글을 유지하려면 어떻게 해야 합니까?

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

문제:

동적으로 로드된 콘텐츠 <기사> 높이가 달라질 수 있습니다. 목표는

콘텐츠가 많은 경우 페이지 하단에, 제한된 경우 브라우저 창 하단에 표시됩니다.

답변:

Flexbox 버전:

Flexbox를 지원하는 브라우저의 경우 간단한 해결책은 display: flex 속성을 래퍼 요소(#main-wrapper)의 높이가 100%입니다. 이렇게 하면 래퍼가 전체 뷰포트를 채울 정도로 늘어납니다.

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

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

래퍼 내에서

수직으로 확장할 수 있도록 flex 값이 1이어야 합니다. 이렇게 하면

어느 쪽이 더 큰지에 따라 항상 페이지 하단이나 콘텐츠 하단으로 푸시됩니다.

article {
  flex: 1;
}

수정된 HTML:

<div>

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