新标题：确保页脚始终位于页面底部
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; }