<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定位时，页脚固定在内容上方。我想要的是页脚保持在页面底部但不可见。 */ &lt;html&gt; &lt;body&gt; &lt;header&gt;标题&lt;/header&gt; &lt;main&gt; &lt;h1&gt;标题&lt;/h1&gt; &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.&lt;/p&gt; &lt;/main&gt; &lt;footer&gt;&amp;copy; 版权所有, 商业&lt;/footer&gt; &lt;/body&gt; &lt;/html&gt;</pre>

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 200px;
  background-color: red;
}
.footer-container {
  height: 200px;
  width: 100vw;
}

<div class="footer-container">
  <div class="footer"></div>
</div>