푸터-Footer를 제자리에 두는 방법 (How to keep your footer where it belongs 👣)

이 글은 Dominic FraserHow to keep your footer where it belongs글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

푸터-footer는 페이지의 마지막 요소입니다. 최소한 뷰포트-viewport 하단에 있거나 페이지 내용이 뷰포트보-viewport다 크면 더 낮습니다. 간단하죠?🙄
푸터-footer가 포함된 동적 컨텐츠로 작업할 때 페이지의 컨텐츠가 이를 채울 수 없는 경우에 문제가 발생하는 경우가 있습니다. 푸터-footer는, 우리가 머물기를 원하는 페이지 하단에 머무르기 보다는, 위로 올라가서 그 밑에 빈 공간을 남깁니다.
빠른 해결을 위해 페이지 하단에 푸터-footer를 완전히 배치할 수 있습니다. 하지만 이것은 그 자체의 단점과 함께 옵니다. 내용이 뷰포트보다 커지면 푸터-footer가 뷰포트 하단에 '잠금-stuck' 상태로 유지됩니다.
다음은 우리가 원하지 않는 행동과 원하는 행동을 나타냅니다.
presentation
이를 달성하기 위한 접근법을 살펴보겠습니다.

푸터-footer를 관리합니다.

index.html:
<!DOCTYPE html>

<html>
<head> <link rel="stylesheet" type="text/css" href="main.css" /> </head>

<body> <div id="page-container"> <div id="content-wrap"> <!-- all other page content --> </div> <footer id="footer"></footer> </div> </body>

</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 ] 페이지의 모든 항목을 돌면서 최소 높이를 뷰포트 높이-height (vh)의 100%로 설정합니다. relative는 해당 하위 요소를 absolute값으로 설정할 수 있습니다. 나중에 그 위치를 기준으로 합니다.
  • [ content-wrap ] 에는 푸터-footer의 높이와 같은 bottom padding이 있어 양쪽이 모두 들어 있는 container 내부의 푸터-footer에 정확히 충분한 공간이 남아 있어야 합니다. 여기서 다른 모든 페이지 내용을 포함하는 div는 사용됩니다.
  • footerabsolute으로 설정되고 page-containerbottom: 0으로 고정됩니다. 뷰포트는 absolute 는 아니지만 page-container가 뷰포트보다 크면 아래로 이동합니다. 명시된 바와 같이, 임의로 2.5rem으로 설정된 높이는 위의 content-wrap에서 사용됩니다.
이게 다 입니다. 이제 푸터-footer는 기대했던 곳에 그대로 있습니다!

최종

물론, 이것은 CSS이기 때문에 일부 모바일 전용 UX를 고려하지 않고 100vh가 아닌 최소 높이 min-height: 100%를 사용하는 대안적 접근 방식으로는 완벽하지 않을 것입니다. 하지만 이것에는 나름의 단점이 있습니다.
Flexbox를 사용하는 것이 편하다면 코멘트에 flex-grow을 사용할 것을 제안하는 것도 좋습니다.
어떤 방법을 선택하느냐는 전적으로 여러분에게 달려 있으며, 디자인의 세부사항에 달려 있습니다. 위의 예와 링크가 결정을 내리고 그것을 실행하는 데 시간을 절약하는 데 도움이 되기를 바랍니다. 😁
읽어주셔서 감사합니다. 제가 최근에 쓴 몇 가지 다른 것들이 있습니다.
  • Testing React applications with jest, jest-axe, and react-testing-library
  • A beginner’s guide to Amazon’s Elastic Container Service


이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp