我试图将代码的页脚保留在页面底部，但页脚位于网页的中间。我查看了视频并尝试遵循，但似乎没有任何效果。我的代码可能看起来有点混乱，因为我从不同的 Youtube 视频中获取了一些片段，但问题仍然存在。<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>
4 回答
ibeautiful
TA贡献1993条经验 获得超5个赞
添加bottom: 0;到 CSS 中的页脚选择器：
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: black;
color: white;
}
30秒到达战场
TA贡献1828条经验 获得超6个赞
你有 CSS 属性来覆盖被动行为，允许 flex 将页脚推到底部。flex要解决此问题，请将不是页脚的所有内容放入包装器 div 中，然后添加 CSS 规则以将该包装器的属性设置为 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>
小提琴： https: //jsfiddle.net/cxzpdkh2/
肥皂起泡泡
TA贡献1829条经验 获得超6个赞
由于您为正文提供了 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% 高度。:-)
- 4 回答
- 0 关注
- 114 浏览
添加回答
举报
0/150
提交
取消