How to align the footer with dynamic height to the bottom
Tags: css
Published: 2023-04-06 12:03:32

You might have seen many solutions to align the footer to the bottom when there isn't enough content on the page.
In most of the solutions, the height of the footer needs to be known or it will use some hacky JavaScript.

In this article, we will see how to align the footer to the bottom

- With pure CSS
- Footer with dynamic height
- No extra padding/margin, div, or calculations

When there is enough content, the footer will merge along with the content and will not stick to the bottom.

## Basic setup

First, create a CSS file named `styles.css`, and add the following basic styles.
The following styles are purely for decorative purposes.

```css
body {
  margin: 0;
}

footer {
  background-color: teal;
  border: 1px solid;
  padding: 1rem;
  color: white;
}
button {
  margin: 10px;
}
.content {
  padding: 1rem;
}
```

Create a file named `index.js` and add the following code:

```js
import "./styles.css"
function addContent() {
  const contentDiv = document.querySelector(".content")
  const newDiv = document.createElement("p")
  newDiv.innerHTML =
    "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat ad fuga omnis, assumenda magni nulla maxime explicabo tempora alias nam molestias velit fugit harum dolore? Incidunt doloribus officia sapiente hic."
  contentDiv.appendChild(newDiv)
}

const button = document.getElementById("button")

if (button) {
  button.addEventListener("click", addContent)
}
```

The above JavaScript is there purely for adding content to the page
so that we can see how the footer behaves when there is less content and when there is content, which adds a scrollbar.

Update the `index.html` with the following code:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./index.js"></script>
  </head>
  <body>
    <div class="content">
      <button id="button">Add content</button>
    </div>
    <footer>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
      delectus exercitationem necessitatibus est minus quae autem ex, incidunt
      dolorum vitae, aspernatur illo, sint sit illum? Quidem cumque maxime
      laboriosam nulla?
    </footer>
  </body>
</html>
```

If you open `index.html` in the browser now, you will see the footer at the top.

![footer at top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp3ulveg8lrcjx0x9mkg.png)

## Flexbox solution

We can use the [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) to align the footer to the bottom.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./index.js"></script>

    <style>
      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      .content {
        flex: 1 0 auto;
      }
      .footer {
        flex-shrink: 0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <button id="button">Add content</button>
    </div>
    <footer>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
      delectus exercitationem necessitatibus est minus quae autem ex, incidunt
      dolorum vitae, aspernatur illo, sint sit illum? Quidem cumque maxime
      laboriosam nulla?
    </footer>
  </body>
</html>
```

Here,

- We have added a height of 100% to the body so that footer can be aligned to the bottom.
- We have made the body as a flexbox with direction as column.
- `flex:1 0 auto` makes the content to occupy the available height and pushes the footer to the bottom.
- `flex-shrink: 0` ensures that the footer occupies the required height and does not shrink away.

![footer at bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wypgnl9hjjn3xn8iicx2.png)

## Grid solution

If you are a grid person, we have a solution for you as well.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./index.js"></script>

    <style>
      html {
        height: 100%;
      }
      body {
        min-height: 100%;
        display: grid;
        grid-template-rows: 1fr auto;
      }
      .footer {
        grid-row-start: 2;
        grid-row-end: 3;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <button id="button">Add content</button>
    </div>
    <footer>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
      delectus exercitationem necessitatibus est minus quae autem ex, incidunt
      dolorum vitae, aspernatur illo, sint sit illum? Quidem cumque maxime
      laboriosam nulla?
    </footer>
  </body>
</html>
```

Here, `grid-template-rows: 1fr auto;` makes the first item (content) to occupy the available space and
the second item (footer) to occupy only the required space.

## Demo

You can view the flex box demo [here](https://codesandbox.io/s/footer-bottom-flex-79gir2?file=/index.html) and
the grid demo [here](https://codesandbox.io/s/footer-bottom-grid-qmwpt7?file=/index.html).