我正在尝试将代码的页脚保留在页面底部，但页脚位于网页的中间。
我看过视频并尝试进行后续操作，但似乎没有任何效果。
我的代码可能看起来有些混乱，因为我从不同的Youtube视频中获取了点点滴滴，但问题仍然存在。
<!DOCTYPE html>
<html>
<head>
<title>Neighbors from Space</title>
<link rel="stylesheet" type="text/css" href="C:\Users\evano\Documents\solarSystem.css">
</head>
<body>
<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>
</body>
<!-- The info I get for making the footer is from this youtube video
https://www.youtube.com/watch?v=KUHrMzN7ey8
-->
</html>
这里是CSS
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;
}
将bottom: 0;添加到CSS中的页脚选择器中：
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: black;
color: white;
}
由于您已将display：flex赋予身体，因此您还可以使用flexbox的可能性，并在页脚上使用align-self：
#footer {
height: 100px;
width: 100%;
background: black;
color: white;
align-self: flex-end;
}
所有现代浏览器均支持。如果必须使用较旧的浏览器，则可能必须坚持#footer的position：absolute和bottom：0。
也将您的html和body设置为100px的高度，这使它们比您的内容小。考虑将它们设置为100％的高度。 ：-）
您具有CSS属性，这些属性将覆盖被动行为，从而使flex可以将页脚推到底部。要解决此问题，请将不是页脚的所有内容放入包装div中，然后添加CSS规则以将该包装的flex属性设置为1，并删除所有其他position: absolute规则和显示类型。
如果您想要一个固定的页脚，该页脚将始终固定在浏览器窗口的底部，则有所不同。只是为了清楚起见，将页脚放在内容的底部。
<html>
<head>
...
</head>
<body> <!-- display: flex -->
<div id="wrapper"> <!-- flex: 1 -->
...
</div>
<footer id="footer"> <!-- no extra rules required -->
...
</footer>
</body>
</html>
尝试给出身体位置：相对