본문의 컨텐츠가 짧을 경우; 바닥글은 뷰포트 하단에 고정된다. 반면, 페이지의 컨텐츠가 뷰포트 하단을 넘어서까지 확장되면; 바닥글은 컨텐츠 아래에 배치되고, 스크롤 시 나타난다:

            
                html, body { height: 100%; margin: 0; padding: 0; }
                body { display: flex; flex-direction: column; min-height: 100%; margin: 0 auto; }
                
                header, footer { flex-grow: 0; flex-shrink: 0; padding: 1em; color: #fff; background-color: rgb(75 70 74 / 0.5); }
                main { flex-grow: 1; }