我試圖將代碼的頁(yè)腳保留在頁(yè)面底部，但頁(yè)腳位于網(wǎng)頁(yè)的中間。我查看了視頻并嘗試遵循，但似乎沒有任何效果。我的代碼可能看起來有點(diǎn)混亂，因?yàn)槲覐牟煌?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貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
添加bottom: 0;到 CSS 中的頁(yè)腳選擇器：
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: black;
color: white;
}
30秒到達(dá)戰(zhàn)場(chǎng)
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊
你有 CSS 屬性來覆蓋被動(dòng)行為，允許 flex 將頁(yè)腳推到底部。flex要解決此問題，請(qǐng)將不是頁(yè)腳的所有內(nèi)容放入包裝器 div 中，然后添加 CSS 規(guī)則以將該包裝器的屬性設(shè)置為 1，并刪除所有額外的position: absolute規(guī)則和顯示類型。
如果您想要一個(gè)粘性頁(yè)腳，它總是粘在瀏覽器窗口的底部，那就有點(diǎn)不同了。這只是為了將頁(yè)腳放在內(nèi)容的底部，以便澄清。
<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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊
由于您為正文提供了 display:flex ，因此您還可以使用 Flexbox 的可能性并在頁(yè)腳上使用align-self：
#footer {
height: 100px;
width: 100%;
background: black;
color: white;
align-self: flex-end;
}
所有現(xiàn)代瀏覽器都支持它。如果您必須為較舊的瀏覽器提供服務(wù)，則可能必須堅(jiān)持 #footer 的position:absolute 和bottom:0。
此外，您的 html 和 body 高度設(shè)置為 100px，這使得它們比您的內(nèi)容小。考慮將它們?cè)O(shè)置為 100% 高度。:-)
- 4 回答
- 0 關(guān)注
- 201 瀏覽
添加回答
舉報(bào)
0/150
提交
取消