How to Push a Footer to The Bottom of Page When Content Is Short or Missing

Push footer to the bottom of a short page

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">© All Rights Reserved</footer>
</body>

Show footer at the bottom of the page even if there is not enough content

This should make the footer appear always at the bottom of the page. We make the footer wrapper have position: absolute and use bottom: 0 to push it to the bottom. left: 0 removes the horizontal scrollbar.

html {
    position: relative;
    min-height: 100%;
}
.footerWrap {
    position: absolute;
    background-color: green;
    width: 100%;
    bottom: 0;
    left: 0;
}

<html>
<div class="footerWrap">Footer Here</div>
</html>

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Footer of webpage doesn't reach bottom of page on shorter pages

You need a sticky footer, check the example:

html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }#bottom, #push { height:30px;}
body { background:#333;}#header { height:30px; background:#000; color:#fff; }#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper">    <div id="header">        Header    </div>    <div id="push"></div></div><div id="bottom">    <div id="footer">        Footer    </div></div>

Footer is not displayed bottom of the page (below the content)

If your footer has static content then figure out the height of the footer. For example, if the height of the footer is 50px then,

#site-footer {
    height: 50px;
    margin-top: -50px;
}

Should do the trick.
However, if there's dynamic content which could affect the height of the footer, then you can set the body to display: table; and set the footer to display: table-row; and give it a height of 0px

Here's the original answer to this: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

force footer on bottom on pages with little content

Update 2021 - CSS GRID

Here is a solution using CSS Grid, this is by far the best way to do it on 2021.

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>