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

                
                    html { height: 100%; }
                    body { height: 100%; padding: 0; margin: 0; }
                    
                    .wrapper {
                        min-height: 100%;
                        display: grid;
                        grid-template-rows: auto 1fr auto; /* 1fr은 남는 공간 모두를 차지한다! */
                    }
                    
                    .page-header, .page-footer {
                        padding: 1em; color: #fff; background-color: rgb(75 70 74 / 0.5);
                    }