Why isn't my footer at the bottom of the page?

Question

I'm trying to get the footer of my code to the remain at the bottom of the page, but the footer is in the middle of my webpage.

I've looked up videos and tried following along, but nothing has seemed to work.

My code might look a little messy because I've taken bits and pieces from different Youtube videos, but the problem still stands.

body {
  margin: 0;
  padding: 0;
  background: #004882;
  height: 100px;
  display: flex;
  flex-direction: column;
}

html {
  height: 100px;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  display: black;
  background-color: #101010
  /* A lot of the information I got for making the header I got from this youtube video
    	https://www.youtube.com/watch?v=GxwHXxumdQk
    	*/
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 50px;
}

.logo h3 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
}

.navigation {
  float: right;
  height: 100%;
}

.navigation a {
  height: 100%;
  display: table;
  ;
  float: left;
  padding: 0px 20px;
}

.drop-down {
  display: table-cell;
  vertical-align: middle;
  ;
  height: 100%;
  color: white;
  font-family: monospace;
  background-color: gray;
  font-size: 20px;
}

.drop-down select {
  font-family: monospace;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
}

.drop-down button {
  font-family: monospace;
  background-color: gray;
  color: white;
  font-size: 20px;
}

.drop-down button:hover {
  background-color: #008B8B;
}

img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  min-height: 100%;
}

.planets img {
  height: 300px;
  width: 300px;
}


/* I got some info on arranging the layout of the 
    imgaes from here
    https://stackoverflow.com/questions/12813573/position-icons-into-circle
    */

.planets {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border: dashed 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  flex: 1;
}

.planets a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

#footer {
  position: absolute;
  left: 0;
  height: 100px;
  width: 100%;
  background: black;
  color: white;
}

<div class="header">
  <div class="logo">
    <h1>Neighbors from Space</h1>
    <br>
    <h3> Created by Evan O'Grady</h3>
  </div>

</div>

<nav class="drop-down">
  <button type="button">About</button>

  <label for="planets-nav"><strong>Planets: </strong></label>
  <select id="planets">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>

  <label for="references"><strong>References for: </strong></label>
  <select id="references">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>



  <label for="contact"><strong>Contact: </strong></label>
  <select id="contact">
    <option value="email">Email</option>
    <option value="linkedin">LinkedIn</option>
    <option value="github">GitHub</option>
  </select>

</nav>

<section class="planets">
  <img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury">
  <img src="C:\Users\evano\Downloads\Venus.jpg" alt="Venus">
  <img src="C:\Users\evano\Downloads\Earth.jpg" alt="Earth">
  <img src="C:\Users\evano\Downloads\Mars.jpg" alt="Mars">
  <img src="C:\Users\evano\Downloads\Jupiter.jpg" alt="Jupiter">
  <img src="C:\Users\evano\Downloads\Saturn.jpeg" alt="Saturn">
  <img src="C:\Users\evano\Downloads\Uranus.jpg" alt="Uranus">
  <img src="C:\Users\evano\Downloads\Neptune.jpg" alt="Neptune">
</section>

<footer id="footer">
  <h1>This is a footer</h1>
</footer>


<!-- The info I get for making the footer is from this youtube video
    		https://www.youtube.com/watch?v=KUHrMzN7ey8
    	-->

Answer 1

try give the body position:relative

Answer 2

You have CSS properties which are overriding the passive behavior which allows flex to push the footer to the bottom. To solve this, put everything which isn't your footer inside of a wrapper div, and then add a CSS rule to set the flex property of that wrapper to 1, and remove all the extra position: absolute rules and display types.

If you want a sticky footer, which will always be stuck to the bottom of the browser window, that's a little different. This is just to put the footer at the bottom of the content, for clarification.

<html>
<head>
    ...
</head>
<body> <!-- display: flex -->
    <div id="wrapper"> <!-- flex: 1 -->
        ...
    </div>
    <footer id="footer"> <!-- no extra rules required -->
        ...
    </footer>
</body>
</html>

Fiddle: https://jsfiddle.net/cxzpdkh2/

Answer 3

Since you gave display:flex to the body, you could also use the possibilities of the flexbox and use align-self on the footer:

#footer {
        height: 100px;
        width: 100%;
        background: black;
        color: white;
        align-self: flex-end;
    }

It is supported in all modern browsers. If you have to serve older browsers, you might have to stick to position:absolute and bottom:0 for #footer.

Also your html and body are set to 100px height, which makes them smaller than your content. Consider setting them to 100% height. :-)

Answer 4

Add bottom: 0; to your footer selector in CSS:

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    color: white;
}