바닥글은 페이지 하단이나 콘텐츠 하단(둘 중 더 낮은 쪽)에 있습니다.

Question

다음과 같은 구조를 가지고 있습니다:

으아악

저는

中的内容。因此，

의 콘텐츠를 동적으로 로드하기 위해 자바스크립트를 사용합니다. 따라서

블록의 높이가 변경될 수 있습니다.

콘텐츠가 많을 때는

블록을 페이지 하단에, 콘텐츠 줄이 몇 줄만 있을 때는 브라우저 창 하단에 두기를 원합니다.

현재 둘 중 하나를 선택할 수 있지만 둘 다 선택할 수는 없습니다.

내가 어떻게 할 수 있는지 아시는 분 계시나요? 페이지/콘텐츠 하단이나 화면 하단 중 더 낮은 곳에

붙여넣으세요.

🎜🎜🎜

Answer 1

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

기본 HTML:

으아아아

CSS:

으아아아

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

HTML:

으아아아

CSS:

으아아아

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

Answer 2

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

---

Flexbox 버전

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

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

으아아아 으아아아