LAYOUT LAB / CANONICAL HTML + CSS

내비게이션을 고정한 앱

Keep side navigation stable while main content scrolls.

720px

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

실행한 HTML·CSS 코드
<section class="fixed_sidenav_shell" aria-label="Settings">
    <nav class="fixed_sidenav_shell_list"><a href="#">Profile</a><a href="#">Billing</a></nav>
    <main class="fixed_sidenav_shell_main">Editable settings form scrolls independently</main>
</section>

<style>
.fixed_sidenav_shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-block-size: 100dvh;
}

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

.fixed_sidenav_shell_main {
    min-block-size: 0;
    overflow: auto;
}

</style>
원문 가이드