LAYOUT LAB / CANONICAL HTML + CSS

sticky-footer

Keep footer at the bottom when content is short.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<section class="sticky_footer" aria-label="Account setup">
    <header>Account setup</header>
    <main class="sticky_footer_main">Profile fields and preferences</main>
    <footer><button>Save profile</button></footer>
</section>

<style>
.sticky_footer {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
}

.sticky_footer_main {
    min-block-size: 0;
}

</style>
원문 가이드