Tailwind CSS를 사용하는 고정 바닥글
3242 단어 tailwindcsscssflexbox
일반적으로 HTML 페이지 레이아웃을 의미적으로 이러한 섹션으로 분할하고 싶습니다.
header , main 및 footer .<body>
<header>
Navigation bar
</header>
<main>
Page content
</main>
<footer>
Social links
</footer>
</body>
브라우저 창 하단에
footer 섹션을 유지하려면 이와 같이 Tailwind CSS에서 제공하는 flexbox 유틸리티 클래스를 추가해야 합니다.<body class="flex flex-col min-h-screen ">
<header>
Navigation bar
</header>
<main class="flex-grow">
Page content
</main>
<footer>
Social links
</footer>
</body>
유틸리티 클래스
.flex이것은 body 요소를 플렉스 컨테이너로 설정합니다. body 요소의 모든 직계 자식은 플렉스 항목이 됩니다. .flex-col이것은 플렉스 아이템의 방향을 정의합니다. header , main 및 footer .페이지 레이아웃이 플렉스 항목이 위에서 아래로 배열되는 열과 유사하기를 원합니다.
기본적으로 flexbox는 왼쪽에서 오른쪽으로 가로로 플렉스 항목을 정렬합니다.
.min-h-screen이 클래스는 레이아웃이 브라우저 창의 전체 높이를 차지하도록 합니다. .flex-grow이 클래스를 main에 추가하면 화면에서 사용 가능한 모든 공간을 차지하면서 커지게 됩니다. 사용 가능한 공간은 플렉스 컨테이너의 크기 body 에서 플렉스 항목 header 및 footer 의 합계를 뺀 것과 같습니다. 일반 CSS와 flexbox를 사용하여 바닥글을 맨 아래에 고정합니다.
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1; /* Or flex-grow: 1;*/
}
자원
A Complete Guide to Flexbox
Tailwind CSS Documentation
Flex-grow - MDN Documentation
Reference
이 문제에 관하여(Tailwind CSS를 사용하는 고정 바닥글), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/timosville/sticky-footer-using-tailwind-css-225p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
