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

바닥글 위치 지정: 페이지 또는 콘텐츠 하단, 높이에 맞춰 조정

동적 콘텐츠, 유동적인 바닥글 배치

웹 디자인에서는 종종 다음을 수행하는 것이 바람직합니다. 콘텐츠 길이에 상관없이 바닥글이 페이지나 브라우저 창의 하단에 유지되도록 하세요. 이는 다음을 통해 달성할 수 있습니다.

Flexbox 솔루션

Flexbox를 사용하면 고정 바닥글을 만드는 것이 간단합니다.

1. Flex 컨테이너를 정의합니다(예: #main- 래퍼) 플렉스 방향이 열로 설정되어 있습니다.
2. 플렉스 컨테이너의 방향을 설정합니다. 전체 페이지 높이에 걸쳐 있는지 확인하려면 min-height를 100%로 설정하세요.
3. Flex 값이 0보다 큰 Flex 컨테이너에 하위 요소를 추가합니다(예: 기사 { flex: 1; }). 이렇게 하면 요소를 수직으로 확장하고 바닥글을 아래쪽으로 밀어내는 데 도움이 됩니다.

CSS 코드:

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

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

article {
  flex: 1;
}

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