> 웹 프론트엔드 > CSS 튜토리얼 > 페이지 또는 콘텐츠 하단 중 더 낮은 곳에 남아 있는 고정 바닥글을 만드는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-12-23 00:59:20
원래의
1048명이 탐색했습니다.

How to Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever is Lower?

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

섹션이 다양하면 당황스러운 문제가 발생할 수 있습니다.
섹션은 브라우저 창의 아래쪽 경계를 준수하면서 보이는 콘텐츠의 맨 아래에 유지됩니까?

Flexbox 버전

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

 

#main-wrapper {

  display: flex;

  flex-direction: column;

  min-height: 100%;

}

 

article {

  flex: 1;

}

로그인 후 복사

Html Markup:

1

<div>

로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿