이 게시물은 한국어 로도 제공 됩니다 .
바닥 글은 페이지의 마지막 요소입니다. 최소한 뷰포트 하단에 있거나 페이지 콘텐츠가 뷰포트보다 큰 경우 더 낮습니다. 간단 하죠? ?
바닥 글이 포함 된 동적 콘텐츠로 작업 할 때 페이지의 콘텐츠가 채우기에 충분하지 않은 문제가 가끔 발생합니다. 바닥 글은 페이지 하단에 머 무르지 않고 위로 올라가서 그 아래에 빈 공간을 남깁니다.
빠른 수정을 위해 절대적으로 페이지 하단에 바닥 글을 배치 할 수 있습니다. 그러나 이것은 그 자체로 단점이 있습니다. 콘텐츠가 뷰포트보다 커지면 바닥 글은 원하든 원하지 않든 뷰포트 하단에 '고정'된 상태로 유지됩니다.
이것은 우리가 원하지 않는 행동을 보여줍니다.
이를 달성하기위한 접근 방식을 살펴 보겠습니다.
바닥 글 제어
index.html:
main.css:
#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }그래서 이것은 무엇을 하는가?
- (가)
page-container페이지에있는 모든 주위에 가고, 뷰포트의 높이를 100 %로 최소 높이를 설정합니다 (vh). 그대로relative, 자식 요소는absolute나중에이를 기반으로 위치 로 설정할 수 있습니다 . - 는
content-wrap정확히 충분한 공간. 포장에 그들이 모두 용기 내부의 바닥 글 남겨 보장, 바닥 글의 높이 바닥 패딩이div다른 모든 페이지의 콘텐츠를 포함하는 것입니다 여기에 사용됩니다. - 이
footer설정되어absolute받는 고집bottom: 0의page-container가에 있습니다. 이것은absolute뷰포트 가 아니기 때문에 중요 하지만이page-container뷰포트보다 크면 아래로 이동합니다 . 위에서 언급했듯이2.5rem여기에 임의로 설정된 높이 가content-wrap위에 사용됩니다.
그리고 거기에 있습니다. 이제 바닥 글이 예상대로 유지됩니다!
마지막 터치
그것은 일부 모바일 전용 UX 고려없이 완전하지 않을 것이다, 그래서 물론,이, CSS, 그리고 다른 방법은 사용하는 min-height: 100%것보다 100vh. 그러나 이것은 자체 단점이 있습니다.
Flexbox (flex-grow 포함) 또는 Grid도 사용할 수 있으며 둘 다 매우 강력합니다.
선택하는 방법은 전적으로 귀하와 디자인의 세부 사항에 달려 있습니다. 위의 예와 링크를 통해 결정을 내리고 구현하는 데 시간을 절약 할 수 있기를 바랍니다.
읽어 주셔서 감사합니다. 최근에 제가 작성한 몇 가지 다른 내용이 있습니다.
- Amazon의 Elastic Container Service에 대한 초보자 가이드
- Jest 및 Enzyme을 사용한 반응 테스트