簡體   English   中英

我的頁腳沒有留在網頁底部

[英]My footer doesn't stay at the bottom of my webpage

我是 HTML / CSS 初學者,我無法解決問題。 我的問題是,當我放大時,頁腳會跟着我。

順便說一下,我使用的是 bootstrap 4

html{
    position: relative;
    min-height: 100%;
}

.Footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px;
    background-color: #f5f5f5;
}
<footer class="Footer">

  <div class="container-fluid">

    <div class="col">

      <!-- Les lanngues (Footer) -->
      <div class="col-lg-3 col-xs-2">

      <a href="#">EN</a>
      <a href="#">GER</a>
      <a href="#">FR</a>

      </div>

    </div>
    <div class="col">
      <!-- L'adresse E-mail (Footer) -->
      <div class="col-lg-5 col-xs-5" id="EmailFooter">
        <span class="">E-mail : <a href="#">asdpawd@bluewin.ch</a></span>
      </div>

      <div class="col">
        <!-- Telephone (Footer) -->
        <div class="col-lg-3 col-xs-6">
          <span  id="Tel-Footer" >Tél : xxxxx</span>
        </div>
      </div>
    </div>
 </footer>

未放大: https ://prntscr.com/pi19m7

放大: https ://prntscr.com/pi19v3

當我放大時,它只是停在按鈕上

歡迎來到我們的社區。 使用 felx-box 比使用 absolute 更好。

 html, body { height: 100%; } #page-content { flex: 1 0 auto; } #sticky-footer { flex-shrink: none; } /* Other Classes for Page Styling */ body { background: #000; }
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <body class="d-flex flex-column"> <div id="page-content"> <div class="container text-center"> <div class="row justify-content-center"> <div class="col-md-7"> <h1 class="font-weight-light mt-4 text-black">Sticky Footer using Flexbox</h1> </div> </div> </div> </div> <footer id="sticky-footer" class="py-4 bg-dark text-white-50"> <div class="container text-center"> <small>Copyright &copy;</small> </div> </footer> </body>

將位置設置為絕對可能是問題所在。 此屬性不會對放大做出響應,並且無論其他元素如何移動都將保持在同一位置。 嘗試刪除“位置:絕對;” 如果您希望頁腳與上面的內容隔開,則可以給頁腳一個頂部邊距。

我認為 position: absolute 是這里的問題。 嘗試刪除它,然后運行它。 有時使用位置也可能有點棘手,因此請嘗試克服它,然后應用頁腳並查看結果。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM