npodonnell/html-template-with-header-footer.html

## html-template-with-header-footer.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
                --header-height: 50px;
                --footer-height: 60px;
                --max-page-width: 700px;
            }
            * {
                margin: 0;
            }
            #outer {
                position: relative;
                margin: auto;
                min-height: 100vh;
                max-width: var(--max-page-width);
            }
            #inner {
                padding-bottom: var(--footer-height);
            }
            #header {
                height: var(--header-height);
                background-color: lightblue;
            }
            #footer {
                height: var(--footer-height);
                background-color: yellow;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
            #main {
                background-color: pink;
                min-height: calc(100vh - var(--header-height) - var(--footer-height));
            }
            #content {
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                min-height: calc(100vh - var(--header-height) - var(--footer-height));
            }
        </style>
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <div id="header">
                Header
            </div>
            <div id="main">
                <div id="content">
                    <h1>
                        Centering with CSS is Hard
                    </h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus ipsum ut sem sodales sodales. Mauris tristique sodales magna. Quisque consectetur nunc eu arcu accumsan vehicula. Quisque at faucibus libero. Aliquam scelerisque vulputate sagittis. Suspendisse consequat mi in aliquet egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

                        Nam non nisl varius, porttitor augue quis, hendrerit augue. Praesent nec turpis quam. Duis aliquet, eros sit amet varius commodo, velit lorem egestas arcu, nec blandit nibh orci sed dui. Etiam sollicitudin, massa at vulputate dapibus, quam nulla fringilla enim, finibus semper mi turpis vel augue. Donec nulla nibh, accumsan a sagittis non, tempus vel nunc. Nam feugiat enim nunc, vitae viverra ligula posuere sollicitudin. Aliquam nisl erat, bibendum et arcu facilisis, luctus vulputate ligula. Maecenas tempor sapien eu purus convallis, malesuada pellentesque ligula aliquet. Praesent malesuada ultricies nisi sed viverra. Cras ut laoreet diam, sed tristique nibh. Phasellus nec nibh turpis.

                        Vestibulum id orci vel nulla tempus efficitur ac sed odio. Pellentesque porta neque eros. Cras molestie nibh fermentum, rhoncus dui nec, convallis quam. Aliquam nec orci efficitur, volutpat ante sed, viverra mi. Proin pulvinar vehicula massa, a bibendum ante sagittis vitae. Maecenas commodo elit vitae ligula mollis, sed efficitur augue accumsan. In dui felis, congue ac porta a, condimentum id mi. Aliquam erat volutpat. In lobortis, tellus et tempor gravida, nulla nunc porta lectus, quis feugiat libero sapien non magna. Proin euismod tincidunt sagittis. Donec sem eros, placerat ut vehicula sed, aliquet nec lacus. Morbi consectetur ex ligula, ut viverra elit hendrerit id. Duis ornare arcu nec ex rhoncus bibendum non in erat. In ac ullamcorper diam.

                        Nullam elit diam, mollis non hendrerit et, ornare et justo. Fusce auctor, nulla eu consectetur eleifend, tellus elit semper nisi, tempor vehicula ligula massa eu quam. Proin lobortis, felis eget pharetra ullamcorper, eros odio ultrices eros, et dictum ex ex eu lorem. Sed malesuada sed urna ac egestas. Aenean ac sodales libero, consequat rutrum arcu. Aliquam feugiat odio orci, vitae aliquam dolor elementum ut. In quis nibh quis orci pellentesque sagittis. Praesent dictum, lorem nec interdum rutrum, velit felis aliquam libero, in posuere ante lacus vel diam. Fusce sit amet felis urna. In hac habitasse platea dictumst. Nunc at orci quis ex ornare dignissim. Morbi euismod mauris sit amet massa fringilla commodo.

                        Aenean rutrum ipsum vel consequat rutrum. Donec varius lectus sed erat imperdiet, non tincidunt mauris mattis. Nunc velit ex, elementum sit amet arcu et, luctus molestie diam. Sed consequat iaculis quam, ut finibus sem laoreet ac. Suspendisse lobortis, justo eu viverra dignissim, erat turpis tristique justo, et eleifend dui augue id justo. Quisque porttitor ornare maximus. Donec lacinia sapien varius gravida tempus. Mauris pulvinar quam sed arcu aliquam, nec eleifend nibh sodales. Cras ultrices orci odio. Cras ut feugiat nisl. Morbi ut eros nulla. Curabitur blandit molestie tellus, eu rhoncus risus gravida ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et commodo mi. Nulla sed risus ultrices, vulputate tortor euismod, consectetur dolor. Aliquam volutpat imperdiet risus, ac ultricies velit porttitor in.
                    </p>
                </div>
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>
    </body>
</html>