Push footer to the bottom of a short page

Question

I want to push the footer to the bottom of the page and since the page doesn't have much content the footer floats up and doesn't move to the bottom.

I tried positioning my footer as a fixed element as a workaround and it works but it doesn't in this condition:

In this dimension the footer behaves like you see and it is perfectly expected, hence showing a loophole in my workaround.

This is the website's address: https://n-ii-ma.github.io/Portfolio-Website/contact.html

These are the codes for that part:

/* Contact Footer */

.contact-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
}

<body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">&copy; All Rights Reserved</footer>
</body>

Is there a way for my footer to always stay at the bottom of the page?

Question is unclear hence the footer is already fixed at the bottom, could you explain more what are you trying to implement here? — Tariq Saeed, Sep 16 '21 at 17:01
I've seen the example link you left, but it is indeed at the bottom of the page. Do you want it to stay at the bottom of the white div, instead of the bottom of the whole page? — Caio Felipe Giasson, Sep 16 '21 at 17:12
Caio I guess he not want it to be layerwise over the other elements. he want to only push it at the bottom if the page content is to less to keep the footer at the bottom of the viewport when no scroll is present. — tacoshy, Sep 16 '21 at 17:17
@tacoshy Yes that's exactly what I wanted and your solution totally fixed my problem. Thanks a billion times! — Nima, Sep 16 '21 at 17:19
Can you please check this out. https://stackoverflow.com/a/67846892/9339254 — Iftakhar Ahmed, Sep 16 '21 at 17:27

score 1 · Accepted Answer · edited Sep 16 '21 at 19:00

Simple solution that is fully supported is to use Flexbox.

We give the body a min-height: 100vh so it spans at least the entire viewports height.
The default margin of the body will make the page overflow by default. To counter that, we need to reset the margin with: margin: 0
We re-add a padding. The default margin of most browsers is 8px. SO I chose that. You can take what ever you like.
The padding will also cause an overflow because of the box-modell. To counter that we use: box-sizing: border-box
Then we use flexbox: display: flex.
To maintain the normal block-level behavior we use: flex-direction: column
To push the footer at the bottom we use: margin-top: auto;. That will push the footer to the bottom of the page if the page content is less then the viewport height.

body {
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

<body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">&copy; All Rights Reserved</footer>
</body>

Push footer to the bottom of a short page

1 Answers1