首页  >  问答  >  正文

新标题:确保页脚始终位于页面底部

<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>&copy; 版权所有, 商业</footer> </body> </html></pre>
P粉318928159P粉318928159418 天前451

全部回复(1)我来回复

  • P粉554842091

    P粉5548420912023-08-28 20:08:54

    我认为你可以给它添加一个父级div,父级div的宽度和高度与它相同。

    html:

    .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>

    回复
    0
  • 取消回复