Ryan Fait의 Sticky Footer는 제가 과거에 여러 번 사용했던 간단한 솔루션입니다.

기본 HTML:

CSS:

이것을 이미 얻은 것과 비슷한 것으로 번역하면 대략 다음과 같습니다.

HTML:

CSS:

바닥글 높이와 푸시 div 높이가 일치하도록 래퍼 여백의 음수를 업데이트하는 것을 잊지 마세요. 행운을 빌어요!

Ryan Fait의 Sticky Footer는 매우 훌륭하지만 기본 구조*가 부족하다는 것을 알았습니다.

Flexbox 버전

운이 좋게도 이전 브라우저를 지원하지 않고 Flexbox를 사용할 수 있다면 고정 바닥글은 매우 쉽고 그리고 동적으로 바닥글 크기 조정을 지원합니다.

Flexbox를 사용하여 바닥글을 바닥에 붙이는 비결은 동일한 컨테이너의 다른 요소를 수직으로 구부리는 것입니다. 필요한 것은 display: flex 的全高包装元素和至少一个 flex 值大于 0: p>을 포함하는 형제 요소뿐입니다. CSS:子> 으아아아