为什么我的页脚不在页面底部? [英] Why isn't my footer at the bottom of the page?

问题描述

我试图将代码的页脚保留在页面底部，但页脚位于网页的中间.

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.

我的代码可能看起来有些混乱，因为我从不同的Youtube视频中获取了点点滴滴，但问题仍然存在.

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

推荐答案

在CSS中的页脚选择器中添加bottom: 0;:

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

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

这篇关于为什么我的页脚不在页面底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！