我試圖將代碼的頁腳保留在頁面底部，但頁腳位于網頁的中間。我查看了視頻并嘗試遵循，但似乎沒有任何效果。我的代碼可能看起來有點混亂，因為我從不同的 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條經驗 獲得超6個贊
添加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 關注
- 180 瀏覽
添加回答
舉報
0/150
提交
取消