sc137/sticky-footer.html

## sticky-footer.html
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- this is an example from the MDN Layout Cookbook -->
    <title>Sticky footer</title>

    <!-- <link rel="stylesheet" href="styles.css"> -->

    <style>
        html {
            height: 100%;
            box-sizing: border-box;
        }

        body {
            height: 100%;
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 0;
            margin: 0;
        }

        * {
            box-sizing: inherit;
        }

        section {
            height: 100%
        }

        .wrapper {
            min-height: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }

        .page-header,
        .page-footer {
            background-color: rgb(75, 70, 74);
            color: #fff;
            padding: 20px;
        }

        .page-body {
            padding: 20px;
        }
    </style>


</head>

<body>
    <section>
        <div class="wrapper">
            <header class="page-header">This is the header</header>
            <main class="page-body">
                <p>Main page content here, add more if you want to see the footer push down.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi possimus sunt velit perspiciatis quo
                    magni amet minus error odit tempora, ducimus quis reprehenderit dolores voluptatum voluptatem quam
                    recusandae nobis doloribus.</p>
                <p>Nisi animi quod, pariatur vel explicabo nostrum sunt dolore minus ratione iste autem magni architecto
                    praesentium ipsum cumque voluptatum ullam officiis deserunt qui. Quibusdam tempora impedit dolores
                    mollitia magni corporis.</p>
                <p>Sint ratione tempore rem repellendus? Dolor sed nostrum iusto, soluta dignissimos veniam
                    reprehenderit perferendis ratione debitis excepturi quaerat provident quo laborum, quas voluptas
                    commodi et modi, vero saepe culpa libero?</p>
                <p>Itaque quam sed qui, reprehenderit cupiditate asperiores earum. Optio quis mollitia ab iure nulla
                    illum maiores corrupti, soluta maxime, labore provident facere quas hic fuga eos. Nostrum delectus
                    fugiat nulla.</p>
                <p>Expedita eius delectus ipsum aliquid. Iure voluptatum necessitatibus beatae ea quia excepturi esse,
                    autem error earum deserunt nisi similique tempore sint sunt eaque sit dolorum non aspernatur ipsum
                    laudantium asperiores.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum ratione atque dignissimos quos
                    beatae quaerat explicabo reiciendis itaque in amet. Facere laborum nihil sunt quibusdam quidem
                    velit, provident non aut!</p>
                <p>Perferendis unde modi ea, fugit veniam voluptatum similique provident. Assumenda consequuntur
                    voluptates excepturi dolorum totam et consectetur asperiores dolor delectus dolore, nam maiores
                    nesciunt ab modi eos! Optio, non adipisci.</p>
                <p>Soluta saepe obcaecati, illo assumenda vero maxime, cum facere veniam modi animi aspernatur ex
                    explicabo numquam sunt tenetur ab nam fugiat amet provident laboriosam magnam. Provident qui et esse
                    modi!</p>
                <p>Sed dignissimos id itaque? Amet quam quod consequatur dolorum, quibusdam odit voluptas voluptatem
                    sequi saepe. Voluptates voluptatum, accusamus facilis quisquam, fugit optio corrupti, ipsam
                    inventore saepe perferendis laboriosam nam animi?</p>
                <p>Possimus accusamus maxime non perspiciatis impedit ipsam sit corporis perferendis doloremque
                    blanditiis sint optio, magni mollitia aliquam consectetur rem, fugit voluptate vel fugiat iusto nisi
                    ullam quaerat repellat! Corrupti, voluptates?</p>
            </main>
            <footer class="page-footer">Sticky footer</footer>
        </div>
    </section>
</body>

</html>