首頁  >  問答  >  主體

新標題:確保頁腳始終位於頁面底部

<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 天前449

全部回覆(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
  • 取消回覆