时间戳

首页 > 解决方案 > 为什么我的页脚不在页面底部？

html - 为什么我的页脚不在页面底部？

问题描述

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

我查看了视频并尝试跟随，但似乎没有任何效果。

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

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

标签： htmlcssfooter

解决方案

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

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

推荐阅读