为什么我的页脚不在页面底部？
我试图将代码的页脚保留在页面底部，但页脚位于网页的中间。
我查看了视频并尝试遵循，但似乎没有任何效果。
我的代码可能看起来有点混乱，因为我从不同的 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
添加bottom: 0;到 CSS 中的页脚选择器：#footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; background: black; color: white;} -
撒科打诨
尝试给出身体位置：相对 -
30秒到达战场
你有 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/ -
肥皂起泡泡
由于您为正文提供了 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% 高度。:-)
随时随地看视频慕课网APP
相关分类
Html5