[英]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 ©</small> </div> </footer> </body>
將位置設置為絕對可能是問題所在。 此屬性不會對放大做出響應,並且無論其他元素如何移動都將保持在同一位置。 嘗試刪除“位置:絕對;” 如果您希望頁腳與上面的內容隔開,則可以給頁腳一個頂部邊距。
我認為 position: absolute 是這里的問題。 嘗試刪除它,然后運行它。 有時使用位置也可能有點棘手,因此請嘗試克服它,然后應用頁腳並查看結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.