Pushdown Footers

Sort out your footers!

A common issue many people meet is that thier footer does not properly stick to the bottom of the page. Luckily this is easy to fix. Here is an example of the way this can be done. These are also commonly known as sticky footers.

CSS


* {
    box-sizing: border-box;
}

.main_container {
    min-height: 100vh;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}

HTML


<div class="main_container">
    <header>
        <-- Header content -->
    </header>
    <main>
        <-- All of the important stuff -->
    </main>
    <footer>
        <-- Footer content -->
    </footer>
</div>

How does it work?

This simple solution works by making a container that holds all the content and then positioning all the elements within it using grid.

min-height: 100vh

is used to make the container take up the full height of the page while still allowing it to grow if needed. 1vh is 1 hundreth of the viewport height (the height of the browser window). This means that the container will take up all of the viewport height.

display: grid

is where the magic starts. It allows us to control the sizing of its contents in a grid where we definine the size of each row.

grid-template-rows: min-content 1fr min-content

defines the size of the header, main, and footer sections in that order. The min-content value is used to tell the grid to make the content as small as possible while still fitting. By default grid wants to make all its contents equal. So 1fr means that the content will grow as much as it can with the remaining space. If the space is insufficient, the content will simply fit its self inbetween, this is our sticky footer!. On the other hand, if the content is larger, it will continue to grow to fit.

Also worth mentioning is the

* {
    box-sizing: border-box;
}

is used to make sure that the padding and border are included in the total width and height of the container. Its is a good practice to use this in general as it tends to make more sense to most programmers.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat sed excepturi eius corporis incidunt velit aperiam harum neque perferendis sapiente. Aliquam, veniam at repudiandae obcaecati ducimus consequuntur vero debitis iste?
Consequatur corporis ea voluptatum minus cum esse reprehenderit itaque, saepe sed aperiam fugit a quasi vel iusto! Architecto, harum mollitia laudantium pariatur ut, animi cupiditate placeat atque debitis doloribus nesciunt.
Voluptatum neque ratione fugiat, molestiae rerum aliquam, totam amet sint in sit officia cumque iusto nemo tenetur fugit accusantium. Fugit a non iste numquam ipsum molestiae impedit corporis id quae.
Expedita nihil fuga incidunt beatae ad iusto nostrum, veritatis velit vel eligendi! Culpa voluptatum velit adipisci at voluptas corporis eaque sint quaerat! Incidunt explicabo mollitia iusto. Optio magni a distinctio.
Illo, et! Ad, rerum quia. Voluptatum fugiat sit minus nulla ex quam ducimus facere aliquam odio facilis rem totam velit, ipsam molestiae incidunt repellat mollitia nisi ea animi sunt dolorum.
Nihil aspernatur, corrupti cum aperiam voluptates cupiditate explicabo, sed sequi ut animi excepturi velit mollitia. Temporibus magni magnam eveniet facere libero reiciendis nam dicta laudantium quia, recusandae impedit doloremque distinctio!
Voluptatem provident animi dolore vel ducimus quos, reiciendis beatae eius assumenda quas commodi hic blanditiis amet quod totam molestias sapiente laudantium cumque omnis? Ipsum placeat ea dolores quia eum tenetur!
Libero deserunt esse amet eaque. Qui doloremque necessitatibus consequatur eligendi laboriosam voluptates voluptatem accusamus ullam iure cupiditate perferendis illum cum commodi quae, repellendus error! Dignissimos amet incidunt ab quia ut!
Maxime, laudantium? Similique quos minima praesentium neque modi rem repellendus, eos inventore repudiandae laboriosam mollitia pariatur necessitatibus exercitationem laudantium beatae sint ad, assumenda, voluptatem quisquam ex animi odit! Nihil, minus.
Quis facilis perspiciatis sed labore, maxime ducimus ex soluta eius repellat aspernatur, temporibus veniam magni sapiente, totam ipsum quam quae quidem consequuntur nesciunt alias. Alias modi praesentium possimus enim libero?
Cupiditate quam, tempore odit nam reprehenderit in ad temporibus fugiat distinctio perferendis eos eius ullam. Debitis consequatur eaque, ipsa, modi commodi cupiditate ducimus ex voluptas reprehenderit deleniti ad perspiciatis ab.
Quasi impedit sit libero aspernatur tempora. Laboriosam similique in maiores dignissimos sunt omnis mollitia, voluptas quas sint dolores consectetur minus quibusdam libero recusandae laborum vitae commodi hic sed iusto a.