DEV Community

loading...

How to Make Footer Stick to the Bottom of the Page

shafiemoji profile image Shafi ・2 min read

The easiest way you can make your websites footer stick to the bottom of the page no matter what the height of your webpage is to use CSS flexbox.

This is our example HTML webpage's code:

<header>
    <h1>HEADER TITLE</h1>
    <h2>Subtitle</h2>
</header>

<div class="content">
   <h1>Content Title</h1>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        incidunt explicabo error, maxime reiciendis consectetur sapiente velit
        perspiciatis, quibusdam enim facere praesentium vitae alias dignissimos
        debitis impedit sequi, assumenda ipsa.
   </p>
</div>

<footer>
      <h3>Created By Shafi</h3>
      <p>&copy; 2020</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

We've connected our stylesheet with this page and stripped down the default styling by using this CSS Snippet

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}
Enter fullscreen mode Exit fullscreen mode

At this moment our webpage looks like this:

To take our footer element to the bottom of the page, we're going to use our body element as a flex container. All the children of body will thus turn into individual flex items.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Here, using the display: flex turned our body element into a flex container.

The flex-direction property specifies the direction of the flexible items.
We set flex-directions property as column. Thus all the children of body will flow from top to bottom.

And we set a min-height property on our page so that no matter what the contents length is, the body height will at least equals to the screen size.

Well, the CSS didn't do much to our webpage, did it?

Worry not! We'd only need one more line of code to set our footer to the bottom of the screen.

.content {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

The flex property is a shorthand property for:

  • flex-grow
  • flex-shrink
  • flex-basis

The flex property sets the flexible length on flexible items.

This tells our content div to take all the available unused space.

Our webpage now looks like this!

Cheers 🎉

Now if we want to center all the contents inside of our content div, we can just turn it into a flex container like this


.content {
  flex: 1;
  /* CENTER EVERYTHING VERTICALLY */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Enter fullscreen mode Exit fullscreen mode

And now the end result looks like this


Create an Array of Months with JavaScript

Discussion (1)

pic
Editor guide
Collapse
madza profile image
Madza

yup, this is handy, search this most of the time 😉