新標題：確保頁腳始終位於頁面底部
P粉318928159
2023-08-27 23:13:19
<p>我正在進行一個項目，我想讓頁腳保持在頁面底部，但在滾動到頁面底部之前不可見。我嘗試在我的CSS中使用'position: fixed'，但它浮在我的內容上方，對於絕對定位，它固定在頁面中間並覆蓋了內容。此外，對於內容不多的頁面，當我不指定位置或使用'position: absolute'時，頁腳下方會有空白。請提供建議。 </p>
<pre class="brush:php;toolbar:false;">* {
margin: 0;
padding: 0;
}
header {
background-color: gray;
}
footer {
background-color: gray;
bottom: 0;
height: 20px;
position: fixed;
width: 100%;
}
/* 當我使用fixed定位時，頁腳固定在內容上方。我想要的是頁腳保持在頁面底部但不可見。 */
<html>
<body>
<header>標題</header>
<main>
<h1>標題</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
</main>
<footer>© 版權所有, 商業</footer>
</body>
</html></pre>
我認為你可以給它添加一個父級div，父級div的寬度和高度與它相同。
html:
.footer { position: fixed; bottom: 0; left: 0; width: 100vw; height: 200px; background-color: red; } .footer-container { height: 200px; width: 100vw; }