> 웹 프론트엔드 > CSS 튜토리얼 > HTML 페이지 하단에 고정 바닥글을 만드는 방법은 무엇입니까?

HTML 페이지 하단에 고정 바닥글을 만드는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-13 15:54:02
원래의
294명이 탐색했습니다.

How to Create a Fixed Footer at the Bottom of the Page in HTML?

페이지 하단에 고정 바닥글을 얻는 방법

HTML에서 "바닥글" div를 배치하면 공간을 확보해야 하는 경우가 많습니다. 전체 페이지 너비로, 아래에 공백을 두지 않습니다. 고정된 위치를 할당하면 이를 달성할 수 있지만 페이지 콘텐츠의 길이가 짧으면 콘텐츠가 겹칠 수 있습니다.

이 문제를 해결하기 위해 "고정 바닥글" 기술의 힘을 활용할 수 있습니다. 작동 방식을 살펴보겠습니다.

  • 레이아웃 디자인:

    • 페이지 레이아웃을 두 개의 주요 섹션인 "래퍼"로 나눕니다. 기본 콘텐츠의 div 및 "바닥글" div.
  • CSS 스타일 지정:

    • "래퍼" div와 "바닥글" 모두의 높이 값을 정의합니다. div.
    • 높이와 일치하는 "래퍼" div에 음수 margin-bottom을 할당합니다. "바닥글". 이렇게 하면 기본 콘텐츠가 페이지 위쪽으로 "밀어집니다".
    • 위치: 상대로 "바닥글" div의 위치를 ​​지정하고 하단:으로 페이지 하단에서 오프셋을 지정합니다. 0.

위에서 설명한 단계를 수행하면 페이지 하단에 고정된 바닥글이 고정되어 다양한 콘텐츠 길이에 원활하게 적응할 수 있습니다.

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

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