How to Make Sure That My Footer Shows All the Way at End of the Page Rather Than in the Middle

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;
}

How to keep footer at bottom of screen

What you’re looking for is the CSS Sticky Footer.

* {

  margin: 0;

  padding: 0;

}

html,

body {

  height: 100%;

}

#wrap {

  min-height: 100%;

}

#main {

  overflow: auto;

  padding-bottom: 180px;

  /* must be same height as the footer */

}

#footer {

  position: relative;

  margin-top: -180px;

  /* negative value of footer height */

  height: 180px;

  clear: both;

  background-color: red;

}

/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {

  content: "";

  height: 100%;

  float: left;

  width: 0;

  margin-top: -32767px;

  /* thank you Erik J - negate effect of float*/

}

<div id="wrap">

  <div id="main"></div>

</div>

<div id="footer"></div>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Footer at bottom of page or content, whichever is lower

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

#main-wrapper {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  min-height: 100%;

}

article {

  -webkit-box-flex: 1;

      -ms-flex: 1;

          flex: 1;

}

header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}

<div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

HTML Footer floating slightly above bottom of page at certain resolutions

Can you try this? I just added an additional container and set a minimum height to it so it uses the available space in the viewport and pushes the footer to the bottom.

To further explain, you have 3 main sections on your page:

Navar or Header
Content
Footer

The idea is to make the content as tall as your screen so the footer is not positioned above the bottom edge of the screen. So you can just create a single container where all of your content's sections will be, and adding some CSS to make it use all that available height.

What I did then was creating the main-container div, and then adding a single CSS rule:

.main-container: {min-height: calc(100vh - 221px)}

I use the calc() function so I can have a bit more control on the final size, in this case, 221px is the sum of your footer's total height + the navbar's total height (you can confirm this just by inspecting each element), so now the .main-containr will have a minimum height of your total screen minus the space used by the footer and navbar, that way, if you have little content on the screen, the footer will still be at the bottom edge because the main container is using that space.

html,

body {

  width: 100%;

  height: 100%;

  margin: 0px;

  padding: 0px;

  overflow-x: hidden;

}

/*

  Target the element that holds all your content, and set a minimum height so it uses the full viewport height (100vh)

  

*/

.main-content {

  min-height: calc(100vh - 221px)

}

body {

  background-color: white;

  color: rgb(85, 85, 85);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  line-height: 1.6em;

  margin: 0;

}

.clr {

  clear: both;

}

.container {

  width: 80%;

  margin: auto;

  overflow: hidden;

}

#navbar .container {

  margin: 0;

}

.button {

  background-color: rgb(51, 51, 51);

  color: white;

}

.button:hover {

  background-color: green;

}

#myHeader {

  background-color: green;

  color: white;

}

#myHeader .container {

  width: 90%;

}

#navbar {

  background-color: rgb(51, 51, 51);

  color: white;

}

#navbar ul {

  padding: 0;

  list-style: none;

}

#navbar li {

  display: inline;

}

#navbar a {

  color: white;

  text-decoration: none;

  font-size: 18px;

  padding: 15px;

}

#showcase {

  background-image: url("../Images/showcase.jpg");

  background-position: center right;

  background-size: 100% 100%;

  color: white;

  min-height: 300px;

  margin-bottom: 30px;

  text-align: center;

}

#showcase h1 {

  color: white;

  font-size: 50px;

  line-height: 1.6em;

  padding-top: 30px;

}

#main {

  float: left;

  width: 70%;

  padding: 0 30px;

  box-sizing: border-box;

}

#sidebar {

  float: right;

  width: 30%;

  background: rgb(51, 51, 51);

  color: white;

  padding: 0 30px;

  box-sizing: border-box;

}

#mainFooter {

  background: rgb(51, 51, 51);

  color: white;

  text-align: center;

  padding: 20px;

  margin-top: 40px;

}

@media(max-width: 600px) {

  #main {

    width: 100%;

    float: none;

  }

  #sidebar {

    width: 100%;

    float: none;

  }

}

<body>

  <header id="myHeader">

    <div class="container">

      <h1>Finn Llewellyn</h1>

    </div>

  </header>

  <nav id="navbar">

    <div class="container">

      <ul>

        <li><a class="button" href="#">Contact</a></li>

        <li><a class="button" href="#">Projects</a></li>

        <li><a class="button" href="#">Cool Things</a></li>

        <li>Note: These don't do anyting yet lol</li>

      </ul>

    </div>

  </nav>

  

  <!-- Group all of your content inside a single container, not including the navbar and the footer -->

  <div class="main-content">

    <section id="showcase">

      <div class="container">

        <h1>Computers are cool lol</h1>

        <h2>That's why this site is awful on mobile</h2>

      </div>

    </section>

    <div class="container">

      <section id="main">

        <h1>About Me</h1>

        <p>

          My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and which spec components will best suit a specific use case. I also like to think I'm alright

          at diagnosing and solving technical issues. Staying true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn a real, spoken language, like Spanish. Hopefully

          i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science, Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a

          B-Tech in softwar/app development.

        </p>

      </section>

      <aside id="sidebar">

        <h1>Cool Things</h1>

        <ol>

          <li>Star Wars</li>

          <li>Half-Life series</li>

          <li>DOOM</li>

          <li>Radiohead</li>

          <li>Blur</li>

          <li>R.E.M</li>

          <li>YouTube</li>

          <li>AMD Ryzen CPUs</li>

          <li>Other geeky stuff</li>

        </ol>

      </aside>

    </div>

  </div>

  <div id="mainFooter">

    <p>This footer is just here to look nice</p>

  </div>