CODEWITHSUNDEEP
htmlcssfooter
Nima Zarei
Nima Zarei

Reputation: 1231

Push footer to the bottom of a short page

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:

enter image description here

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?

Upvotes: 0

Views: 2319

Answers (1)

tacoshy
tacoshy

Reputation: 13002

Simple solution that is fully supported is to use Flexbox.

  1. We give the body a min-height: 100vh so it spans at least the entire viewports height.
  2. 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
  3. We re-add a padding. The default margin of most browsers is 8px. SO I chose that. You can take what ever you like.
  4. The padding will also cause an overflow because of the box-modell. To counter that we use: box-sizing: border-box
  5. Then we use flexbox: display: flex.
  6. To maintain the normal block-level behavior we use: flex-direction: column
  7. 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>

Upvotes: 2

Related Questions